vue:Class与Style绑定（实现复杂样式需求）

红太狼 2023-07-11 11:07 8阅读 0赞

### Class与Style绑定（实现复杂样式需求） ###

*  前言
 *  提醒
 *  个人理解
 *  一、绑定HTML Class
 *   *  1.对象语法
     *   *  1.1 语法
         *  1.2 对象语法的扩展：
         *  1.3 绑定的数据对象不必内联定义在模板里
         *  1.4 绑定一个返回对象的计算属性
     *  2. 数组语法
     *   *  2.1 语法
         *  2.2 使用三元表达式实现根据条件切换列表中的class
         *  2.3 在数组语法中使用对象语法
 *  二、绑定内联样式
 *   *  1.对象语法
     *   *  1.1 语法
         *  1.2 直接绑定到一个样式对象
         *  1.3 结合返回对象的计算属性使用
     *  2.数组语法
 *  三、关于样式前缀 （浏览器兼容性）
 *   *  自动添加前缀
     *  多重值

# 前言 #

**操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可**。

不过，字符串拼接麻烦且易错。因此，**在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。**

下面将分别使用对象和数组的形式，动态的绑定class列表和内联样式。

# 提醒 #

和通过表达式计算出字符串结果一样，使用对象或者数组动态绑定样式时使用的对象`{ }`或者数组`[ ]`同样是写在`:claaa=`或者`:style=`后的引号`" "`里。比如：  
**对象**  
`<div :class="{ active: isActive }"></div>`  
**数组**  
`<div :class="[activeClass, errorClass]"></div>`

# 个人理解 #

**可以将对象里的样式变量放在data里，然后可以控制该样式变量的变化来实现复杂的样式需求。**

# 一、绑定HTML Class #

## 1.对象语法 ##

### 1.1 语法 ###

可以传给 `v-bind:class` 一个对象，以动态地切换 class：

`<div v-bind:class="{ active: isActive }"></div>`

上面的语法表示 `active` 这个 class 存在与否将取决于数据属性 `isActive` 的 `truthiness (真实性)`。

### 1.2 对象语法的扩展： ###

*  我们也可以**在对象中传入更多属性来动态切换多个 class**。
 *  此外，**v-bind:class 指令也可以与普通的 class 属性共存**。

**实例：**

data: { 
      isActive: true,
      hasError: false
    }

结果渲染为：

**分析：**  
上面实例中需要注意两点

1.  `v-bind:class`指令和普通的标签class属性（`class="static"`）共存了
2.  `v-bind:class`指令本身也可以灵活的使用数据绑定（`active: isActive`），或者直接用单引号包裹加入普通的class属性（`'text-danger': hasError`）

当 `isActive` 或者 `hasError` 变化时，class 列表将相应地更新。例如，如果 `hasError` 的值为 `true`，class 列表将变为 `"static active text-danger"`。

### 1.3 绑定的数据对象不必内联定义在模板里 ###

1.  **绑定的数据对象不必内联定义在模板里：**

data: { 
      classObject: { 
        active: true,
        'text-danger': false
      }
    }

渲染的结果和上面一样。

### 1.4 绑定一个返回对象的计算属性 ###

我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：

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

## 2. 数组语法 ##

### 2.1 语法 ###

我们可以把一个数组传给 `v-bind:class`，以应用一个 class 列表：

data: { 
      activeClass: 'active',
      errorClass: 'text-danger'
    }

渲染为：

### 2.2 使用三元表达式实现根据条件切换列表中的class ###

如果我们想根据条件切换列表中的 class，可以用三元表达式：

这样写将始终添加 `errorClass`，但是只有在 `isActive` 是 `truthy (真)` 时才添加 activeClass。

不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法，下面介绍在数组语法中使用对象语法。

关于`truthy`得备注：

**在 JavaScript 中，truthy（真值）指的是在布尔值上下文中，转换后的值为真的值。所有值都是真值，除非它们被定义为 假值（即除 false、0、""、null、undefined 和 NaN 以外皆为真值）。**

### 2.3 在数组语法中使用对象语法 ###