Vue3+.net6.0 五 类和样式绑定

Vue3关于样式的处理跟Vue2是一样的，常用的有以下几种。

1.绑定属性

html部分：

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

js部分：

data() {
  return {
    isActive: true
  }
}

当 isActive 值为true时，div应用这个active样式，反之亦然。

 

2. 对象方式绑定

<div :class="classObject"></div>

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

当元素要绑定多个样式时，可以用对象方式。

 

3. 绑定计算属性

<div :class="classObject"></div>

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

这也是常见的技巧，根据不同的情况判断使用哪些样式。

 

其实还可以用数组的方式绑定样式，但是我个人不喜欢这种。