在vue中使用样式的方法

Posted starwei

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在vue中使用样式的方法相关的知识,希望对你有一定的参考价值。

一、vue属性绑定

在vue中,是通过v-bind 属性绑定来实现给元素绑定style样式。

其中有两种方式,一种是通过绑定class类绑定样式,另一种是通过内联样式来实现样式的绑定。

二、绑定class样式

1. 数组
<h1 :class="[‘red‘, ‘thin‘]">这是一个邪恶的H1</h1>

2. 数组中使用三元表达式
<h1 :class="[‘red‘, ‘thin‘, isactive?‘active‘:‘‘]">这是一个邪恶的H1</h1>

3. 数组中嵌套对象
<h1 :class="[‘red‘, ‘thin‘, {‘active‘: isactive}]">这是一个邪恶的H1</h1> 4. 直接使用对象 <h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>
<style>
     .red {
      color: red;
    }

    .thin {
      font-weight: 200;
    }

    .italic {   /*字体倾斜*/
      font-style: italic;
    }

    .active {       /*字符间距*/
      letter-spacing: 0.5em;
    }
</style>
<body>
    <div id=app>
        <!-- v-bind:等同于: -->
        <!-- 第一种使用方式,直接传递一个数组,注意: 这里的 class 需要使用  v-bind 做数据绑定 --> 
        <h3 v-bind:class=[red,thin]>今天永远比昨天更好</h3>
        <!-- 在数组中使用三元表达式 -->
        <h3 v-bind:class=[red,thin,flag?active:‘‘]>今天永远比昨天更好</h3>
        <!-- 在数组中使用 对象(即键值对的方式)来代替三元表达式,提高代码的可读性 -->
        <h3 v-bind:class=[red,thin,{active:flag}]>今天永远比昨天更好</h3>
        <!-- 在为 class 使用 v-bind 绑定 对象的时候,对象的属性是类名,由于 对象的属性可带引号,也可不带引号,所以 这里我没写引号;  属性的值 是一个标识符 -->
        <h3 :class="classObj">今天永远比昨天更好</h1>
    </div>
    
</body>
<script src="vue-2.4.0.js"></script>
<script>
    var vm = new Vue({
        el:#app,
        data:{
            flag:true,
            classObj:{
                red: true, thin: true, italic: false, active: false 
            }
        }
    })
</script>
</html>

三、绑定内联样式

1. 直接在元素上通过 `:style` 的形式,书写样式对象
<h1 :style="{color: ‘red‘, ‘font-size‘: ‘40px‘}">这是一个善良的H1</h1>

2. 将样式对象,定义到 `data` 中,并直接引用到 `:style` 中
 + 在data上定义样式:
data: {
        h1StyleObj: { color: ‘red‘, ‘font-size‘: ‘40px‘, ‘font-weight‘: ‘200‘ }
}
 + 在元素中,通过属性绑定的形式,将样式对象应用到元素中:

<h1 :style="h1StyleObj">这是一个善良的H1</h1>

3. 在 `:style` 中通过数组,引用多个 `data` 上的样式对象
 + 在data上定义样式:
data: {
        h1StyleObj: { color: ‘red‘, ‘font-size‘: ‘40px‘, ‘font-weight‘: ‘200‘ },
        h1StyleObj2: { fontStyle: ‘italic‘ }
}
 + 在元素中,通过属性绑定的形式,将样式对象应用到元素中:
```
<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>

 

以上是关于在vue中使用样式的方法的主要内容,如果未能解决你的问题,请参考以下文章

MUI

vue修改当前页样式不影响公共样式的方法

vue —— VSCode代码片段

vue —— VSCode代码片段

VSCode自定义代码片段——.vue文件的模板

Vue报错:Uncaught TypeError: Cannot assign to read only property 'exports' of object 的解决方法(代码片段