我是怎么学会vue的08：v-bind动态绑定class（对象语法）

实际开发中，标签的class通常不会使用一个普通字符串写死，而是动态地给标签绑定class，有2种绑定语法：对象语法和数组语法。

对象语法（常用）

绑定方式是使用对象 v-bind:class="{ }"。

对象{ }由键值对构成，键是类名，值是布尔值。

如下所示：

<h2 v-bind:class="{类名1:boolean，类名2:boolean}">

对象语法的核心是：根据布尔值，判断要不要给标签加上某个类。要点在于，Boolean不仅可以通过data定义，还可以通过计算获得（比如使用===来计算true或false）。

使用场景：某标签有时需要加class，有时不需要加class。

比如豆瓣电影页面上，【最近热门电影】右边有几个按钮，点谁就把谁的颜色变成黑色，其它按钮的字变成灰色。通过查看控制台可知，点击按钮时给标签添加了一个active类，并去掉别的按钮的active类。

演示1：给标签动态绑定class

1. dom

   <h2 v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>

2. 数据

   data:{
      message:"你好",
      isActive:true,
      isLine:true
   }

这样h2的两个类都会显示。

演示2：点一下按钮 h2变红，再点击一下h2变黑

1. dom

   <div id="app">
    <h2 class="title" v-bind:class="{active: isActive, line: isLine}">{{message}}</h2>
    <button v-on:click="btnClick">按钮</button>
   </div>

2. vue实例

   const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊',
        isActive: true,
        isLine: true
      },
      methods: {
        btnClick: function () {
          this.isActive = !this.isActive
        }
      }
    })

练习

使用v-for加v-bind，实现如下效果：

点击哪项，哪项变红。

要点：

1. 每个li都有一个index。
2. 判断li和预设值是否相等，来决定动态绑定的class是true还是false。

缩写

使用 :class 代替 v-bind:class

<h2 v-bind:class="{active:isActive,line:isLine}"><!--不缩写-->
<h2 :class="{active:isActive,line:isLine}"><!--缩写-->

如果对象太长了

可以把对象绑定成一个 methods，或使用 computed 计算属性。

methods

在上面的缩写中，我如果觉得{active:isActive,line:isLine}太长了，我可以把这个对象写成一个方法，再把方法放到vue实例的methods属性里面。

<h2 class="title" v-bind:class="getClasses()">{{message}}</h2>
<button v-on:click="btnClick">按钮</button>
<!--注意方法名getClasses()后面要加小括号-->
<!--btnClick不用加小括号的原因是：小括号被省掉了，其实调用函数都得加小括号-->

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isActive: true,
      isLine: true
    },
    methods: {
      btnClick: function () {
        this.isActive = !this.isActive   //注意要加this
      },
      getClasses: function () {
        return {active: this.isActive, line: this.isLine} //注意要加this
      }
    }
  })
</script>

computed

后面会讲到。

建议

1. 固定的class，使用class=""，可能之后会删的，使用v-bind:class="{}"。
2. class=""和v-bind:class="{}"可以一起写，不冲突。

数组语法（不常用）

当类很多的时候，可以把类名都放进一个数组中进行展示。

<h2 class="title" :class="[active, line]">{{message}}</h2>

也可以把 [active, line] 放进methods里。

<h2 class="title" :class="getClasses()">{{message}}</h2>

const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      active: 'aaaaaa',
      line: 'bbbbbbb'
    },
    methods: {
      getClasses: function () {
        return [this.active, this.line]
      }
    }
})