Vue属性绑定 ---Class 与 Style 绑定

先写style样式:

Class绑定: 4种方法:

第1种 : (数组的形式 ): 直接传递一个数组, 注意: 这里的 class 需要使用 v-bind 做数据绑定
注:: :class 数组中的red和fwThin 是 里边的.red 和 .fwThin

    
v-bind绑定class样式

第2种 : 在数组中绑定三元表达式

    
v-bind  在数组中绑定三元表达式

第3种 : 在数组中使用 对象 来代替 三元表达式, 提高代码的可读性

    
v-bind  在数组中使用对象 来代替三元表达式

第4种 : class 使用 v-bind 绑定对象的时候 , 对象的属性名是类名 , 由于 对象的属性 可带引号 , 也可不带引号 , 所以这里 没带引号, 属性的值 : 是一个标识符

    
v-bind  在数组中使用对象 来代替三元表达式
    
    
v-bind  在数组中使用对象 来代替三元表达式
    


    
    

Style绑定: 3种方法:

第1种 : 直接在元素上通过 :style 的形式, 书写样式对象(对象就是无序键值对的集合)

    
属性绑定样式 ----style

第2种 : 将样式对象, 定义到data中 , 然后引用到 :style 里

    
属性绑定样式 ----style,定义到data里面了

第3种 : 在 :style 中通过数组 , 引用多个data上的样式对象

    
属性绑定样式 ----style, 通过多个数组定义