样式有两种：class、style

class

　　1、对象语法

　　　　①传给 :class 一个对象

　　　　比如：

<div :class="{ active : isActive}"></div>

　　　　在这里，isActive的真值决定active这个样式是否显示

 

　　　　②传给 :class 一个对象变量

　　　　再比如，可以直接绑定一个对象

<div :class = "duixiang" ></div> export default{ data(){ return{ duixiang :{ active : true } } } }

　　　　③在②的基础上，把这个对象变量放到computed计算属性里

data: { isActive: true, error: null }, computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal', } } }

 

　　2、数组语法

　　　　传给 :class 一个数组（数组里面是变量名，然后具体变量名所指的内容写到data里）

<div :class = "[ n , i]"> </div> export default{ data(){ return{ n : ' active ', i : ' text-danger ', } } }

　　　　　上面的代码在最后会宣传成为<div class = "active text-anger"></div>

 

style

　　1、对象语法

　　　　①传给 :style一个对象（这个对象是个JavaScript对象）。记住！CSS属性名可以用驼峰式命名

<div :style = " { color : activeColor , fontSize : fontSize + 'px' } "></div>//然后在data里面写明，冒号后边的这个变量的实际内容，如果是单位，像px这种就直接用字符串引着就行了 data: { activeColor: 'red', fontSize: 30 }

　　　　　　②传给 :style一个对象变量。

 

<div v-bind:style="styleObject"></div>//然后在data声明这个对象变量是指代一个怎样具体的对象 data: { styleObject: { color: 'red', fontSize: '13px' } } 同样的，对象语法常常结合返回对象的计算属性使用。

 

转载于:https://www.cnblogs.com/heshiyu1996/p/6591237.html