[TOC] #### 1. v-bind 绑定 class 属性对象语法 --- 对象语法的含义是 **:class** 后面跟的是一个对象，语法格式: ```html <span :class="{类名: 布尔值}"></span> ``` 使用示例: 当布尔值为 true 时才显示该类名 :class 属性是一个对象，对象中的键值可以是布尔值，也可以是 vue 示例中的 data 数据名称 ```html <span :class="{actived: isShow}"></span> <span :class="{active: true, image: false}"></span> ``` 当和普通的类同时存在时，不会冲突，会自动进行合并, 下面 class 属性结果为: **class="online active"** ```html <span class="online" :class="{active: true, image: false}"></span> ``` 如果过于复杂，可以对象放在 computed、methods 中 (数组语法也可以放) ```html <span :class="attr">computed 计算属性</span> <span :class="action()">methods 方法</span> ``` #### 2. v-bind 绑定 class 属性数组语法 --- 数组语法的含义是 **:class** 后面跟的是一个数组，语法格式: ```html <div :class="['active', 'image']"></div> ``` 当数组中的值可以是字符串，也可以是 vue 实例中的 data 数据 ```html <div :class="[color, fontSize]"></div> ``` #### 3. `:class` 属性值使用 methods 方法 --- 很多场景下，我们需要根据逻辑判断需要使用哪些 class 值，代码可能会比较多，这些判断写在模板中则不易维护，此时可以将这些逻辑定义在 methods 中，:class 值绑定为 methods 中的方法 ```html <block v-for="(item, index) in data" :key="index"> <view :class="itemClass(index)">{{ item }}</view> </block> ``` JS 中的方法 ```javascript { methods: { itemClass(index) { const value = ['item', `item-${index}`] value.push(index % 2 == 0 ? 'border1' : 'border2') // 其他逻辑处理 return value } } } ``` #### 4. v-bind 绑定 style 属性对象语法 --- 对象语法的含义是 **:style** 后面跟的是一个对象，语法格式: ```html <span :style="{css属性名: 属性值}"></span> ``` 基础使用 (30px 必须加引号，否则会被当成变量解析) ```html <div :style="{fontSize: '30px', color: 'red'}">{{message}}</div> ``` :style 值也可以是 vue 实例中的 data 数据 (css 是一个对象) ```html <div :style="css">{{message}}</div> ``` #### 5. v-bind 绑定 style 属性数组语法 --- **:style** 数组语法就是后面跟一个数组，数组元素是对象，语法格式: 使用示例: (css1, css2 时 vue 示例中 data 数据对象) ```html <div :style="[css1, css2]">{{message}}</div> ```