我是怎么学会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。
image.png
比如豆瓣电影页面上,【最近热门电影】右边有几个按钮,点谁就把谁的颜色变成黑色,其它按钮的字变成灰色。通过查看控制台可知,点击按钮时给标签添加了一个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,实现如下效果:
image.png
点击哪项,哪项变红。

要点:

  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]
      }
    }
})
阅读 1.5k

100 声望
7 粉丝
0 条评论
100 声望
7 粉丝
文章目录
宣传栏