【Vue.js】Vue官方文档学习-class绑定

在数据绑定中，一个常见需求是，将数据与元素的 class 列表以及元素的 style 内联样式的操作绑定在一起。
由于它们都是属性，因此我们可以使用 v-bind 来处理它们：只需从表达式中计算出最终的字符串。
然而，处理字符串拼接，既麻烦又容易出错。
为此，在使用 v-bind 指令来处理 class 和 style 时，Vue 对此做了特别的增强。
表达式除了可以是字符串，也能够是对象和数组。

一、对象语法

内联data

    <div class="static" :class="{ active:isActive,active2:isActive2 }"></div>

active和active2这两个class 的存在与否，分别取决于 isActive 和isActive2 这个两个 data 属性的 truthy 值。
v-bind:class指令也可以和普通的class同时存在。

data: {
            isActive: true,
            isActive2: false
        }

将会渲染成

<div class="static isActive"}"></div>

外部引用data

<div id="app2" :class="classObject">
        我也应该是红色的
    </div>



----------
    var app2 = new Vue({
        el: '#app2',
        data: {
            classObject: {
                active: true,
                active2: true
            }
        }
    })

与computed属性绑定在一起

<div id="app3" :class="classObject"></div>

----------

    var app3 = new Vue({
        el: '#app3',
        data: {
            isActive: true,
            isActive2: null
        },
        computed:{
            classObject: function(){
                return {
                    active: this.isActive && !this.error,
                    active2: this.isActive2 && this.error.type === 'fatal'
                } 
            }
        }
    })

此 computed 属性所对应的 getter 函数需要返回一个对象。

二、数组语法

直接与class列表对应的数组

可以向 v-bind:class 传入一个数组，来与 class 列表对应：

<div id="app4" :class="[activeClass,active2Class]"> </div>

----------

    var app4 = new Vue({
        el: '#app4',
        data: {
            activeClass: 'active active3',
            active2Class: 'active2'
        }
    })

将会被渲染为

<div id="app4" :class="active active3 active2"> </div>

通过 三元表达式 切换 class列表 中的class

<div id="app5" :class="[isActive ? activeClass : '',active2Class]">
        数组语法中使用三元表达式
    </div>

----------

var app5 = new Vue({
        el: '#app5',
        data: {
            isActive: true,
            activeClass: 'active active3',
            active2Class:'active2'
        }
    })

这里会直接添加active2Class，但是只有在 isActive 值是 truthy 时，才会添加 activeClass。

在数组语法中使用对象语法

<div id="app6" :class="[{active:isActive},active2Class]"></div>


----------

    var app6 = new Vue({
        el: '#app6',
        data: {
            isActive:true,
            active2Class:'active2'
        }
    })

三、在组件中使用

声明组件时绑定class

    Vue.component('todo-item',{
        props: ['todo'],
        template: '<li class="active"> {{todo.text}} </li>'
    })

调用组件时绑定class

    <div id="app7">
        <ol>
            <todo-item class="active2"
            v-for="item in groceryList"
            v-bind:todo="item"
            v-bind:key="item.id"
            ></todo-item>
        </ol>
    </div>

组件也是对象，可以使用对象语法

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