2020-09-22 vue学习笔记——Class与Style绑定（对象语法）

Class于Style绑定

对象语法
我们可以传给 v-bind:class 一个对象，以动态地切换 class：

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

上面的语法表示class是否存在取决于isActive是否为true，即数据属性是否为true。

你可以在对象中传入更多字段来动态切换多个 class。v-bind:class 指令也可以与普通的class共存

.active{
        width:100px;
        height:100px;
        border:1px solid #ccc;
    }
 .bg{
        background-color:azure;
    }
  .text-danger{
         color:red;
    }

<div id="app">
    <div v-bind:class="classObj"}>1</div>
    //这里的classObj包含了两个不同的class和一个普通的class
</div>

var vm = new Vue({
    el: '#app',
    data: {
       msg:"",
       isActive :true,
       isBg:true,
    classObj:{
    //这里将style里的多个数据绑定在一个对象中
       active:true,
       bg:true,
       'text-danger':true
    },

执行结果：

直接将多个数据绑定在一个对象里，直接调用即可。这样的写法拥有更高的可读性。
同样，我们也可以绑定返回对象的计算属性。

var vm = new Vue({
    el: '#app',
    data: {
       msg:"",
       isActive :true,
       isBg:true
    },
    computed:{
        classObj:function(){
        //这里把返回对象绑定在了计算属性中，也可以实现同样的效果。
            return {
                active:this.isActive,
                bg:this.isBg,
                'text-danger':true
            };
        }
    },
  })