21 vue 组件中 Class 的绑定

LIYI

发布于 2020-02-13 11:55:40

1.6K0

发布于 2020-02-13 11:55:40

文章被收录于专栏：艺述论专栏

目录

一般绑定
对象绑定
数组绑定
父子组件中类名覆盖的情况
小结

一般绑定

对于样式类的绑定，使用v-bind就能满足需求，但vue为class的绑定作了特别的优化。

如果一个元素上有'active','text-danger'两个class，一般v-bind默认这样写：

<!-- 一般语法 -->
<div v-bind:class="(classObject['text-danger'] ? 'text-danger ':' ') + (classObject.active ? 'active ':' ')">对象语法1</div>

渲染出来是这样的：

<div data-v-166afc47="" class="text-danger active ">对象语法1</div>

当classObject的属性均为true时，两个class都有。

但是这样的拼接语法很容易出错。所以vue分别使用对象语法与数组语法加强了class的绑定。

对象绑定

以下这三种写法，都是对象绑定的语法：

<!-- 对象语法 -->
<div v-bind:class="{ active: classObject.active, 'text-danger': classObject['text-danger'] }">对象语法1</div>
<div v-bind:class="classObject">对象语法2</div>
<div v-bind:class="classObject2">对象语法3</div>
...
classObject: {
  active: true,
  'text-danger': true
},
computed: {
    classObject2: function () {
      return {
        active: this.classObject.active,
        'text-danger': this.classObject['text-danger']
      }
    },
}

三种写法渲染出来的结果是一样的：

第一种是在表达式中拼合对象，对象的键是class，值是布尔，控制class的启用与否。

第二种是直接绑定对象，第三种是使用计算属性。三种对象的格式都是一样的，键名为class，键值为是否显示。

数组绑定

在class属性上，除了使用对象，还可以使用一个数组。以下两个是数组绑定的语法：

<!-- 数组语法 -->
<div v-bind:class="[classObject3[0], classObject3[1]]">数组语法1</div>
<div v-bind:class="classObject3">数组语法2</div>

渲染结果为：

无论是直接使用一个数组，还是在属性表达式中拼合一个数组，结果都是一样的。数组中有哪些class，哪些class便显示。

父子组件中类名覆盖的情况

有一个情况，如果在子组件的根元素上，与父组件中子组件的定义上，使用了相同的class名称，会出现什么情况？

例如，子组件：

<div v-bind:class="{ active1: true, active3: true }">
...
<style scoped>
.active1{
  color:red;
}
</style>

父组件：

<D21ClassBinding v-bind:class="{ active1: true, active2: true }"></D21ClassBinding>
...
<style scoped>
.active1{
  color:blue;
}
</style>

实际的的渲染结果是，四个class都会被渲染到组件的根元素上：

但是，是子组件中的class先被渲染，其实是父组件，所以当样式有冲突时，运行效果字是蓝色的，而不是红色的：

小结

如果一个组件可能根据运行时的条件不同，会有多个class，这时候为其声明一个class数组不失为一个优雅的选择。

但是，在大多数快速开发的情况下，如果为每个组件的class都要声明一个对象或者数组，这在开发中是有点麻烦的。

简单的做法，就是使用对象绑定的语法，把可能的class都写在属性表达式中，使用js表达式或计算属性或data变量控制每个class的出场与否，这样最省事。

源码

https://git.code.tencent.com/shiqiaomarong/vue-go-rapiddev-example/tags/v20200117