vue中v-bind动态绑定class

在vue.js开发中v-bind一般用来对属性进行绑定，一般的格式为：

v-bind:属性

语法糖格式（简写）：

:属性

v-bind对class属性的动态绑定的方法主要是：

• 对象语法
• 数组语法

对象语法

对象语法的主要编写格式为：

<div v-bind:class="{key1: value1, key2: value2,...}">
</div>

其中的key为自己定义的类名
而value为boolean，即为ture时key才会有效

以下示例HTML代码

<div id="app">{{message}}
    <br>
    <h2 :class="{active: isActive, line: isLine}">{{message}}</h2>
    <button v-on:click="Ctrl">Ctrl</button>
    </div>

示例CSS：

.active{color: rebeccapurple;}

 .line{font-size: 45px;}

示例vue.js：

const app = new Vue({
            el:'#app',          //用于挂在需要管理的数据
            data:{              //定义数据内容
                message:"你好啊，明天！",
                isActive:true,
                isLine: false,
            },
            methods: {
                Ctrl: function(){
                    this.isActive = !this.isActive,
                    this.isLine = !this.isLine
                }
            }
        })

其中按钮Ctrl是用来控制两个类的Boolean值
实战效果如下：

注意控制栏中显示的类变化

• 还有一种就是在methods方法中创建一个函数，最后赋值给想要显示的类

这里是引用

methods: {
              getclasses: function(){
                return {active: this.isActive, line:this.isLine}
              }
          }

数组语法

v-bind动态绑定class的数组语法一般使用不多，
用法：

1. 方法一：直接通过[]绑定一个类

<h2 :class="['active']">{{message}}</h2>

2.方法二：可传入多个值

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

3.方法三：可以和普通类同时存在，不冲突

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

4.方法四：如果过于复杂可以放在一个methods或computed中

注：classes只是一个计算属性

<h2 class="title" :class="classes">{{message}}</h2>