class绑定 ：v-bind 指令 （五）

<script src="vue.js"></script>

<!-- DOM模板 view 视图层 -->
<div id="demo">
    <span class="a" v-bind:class="{active:addClass,visited:hasError}">
        keep going
    </span>
</div>

// model 数据模型层
let obj = {

    addClass:true,
    hasError:false

}
//    Vue 实例
var vm = new Vue({
    el:'#demo',
    data:obj
})

结果后台渲染为：

<div id="demo">
    <span class="a active">keep going</span>
</div>

我们可以传给v-bind:class一个对象、以动态地切换class。active这个class存在与否将取决于数据属性addClass的布尔值，也可以在对象中传入更多属性来动态切换多个class；此外，v-bind:class指令也可以与普通的class属性共存；当addClass或者hasError变化时，class列表将相应地更新。

例如：如果hasError的值为true，即hasError:true。

// model 数据模型层
var obj = {

    addClass:true,
    hasError:true

}
//    Vue 实例
var vm = new Vue({
    el:'#demo',
    data:obj
})

后台渲染为： 

<div id="demo">
    <span class="a active visited">keep going</span>
</div>

---

上述例子讲述了v-bind指令的class绑定，那么v-bind指令除了class绑定之外，还可以绑定id、自定义属性等。

<div id="demo">
    <span v-bind:customId="id">
        {{message}}
    </span>
</div>

// model  数据模型层
var obj = {
    message:'Hello,Vue.js!!!',
    id:'abc'
}

// Vue 实例
var vm  = new Vue({

    el:'#demo',
    data:obj

})

那么后台渲染的结果为：

<div id="demo">
    <span customId="abc">
        Hello,Vue.js!!!
    </span>
</div>

分析：通过数据的形式在元素上绑定自定义属性customId，在数据里添加id:'abc'，随便取一个自定义名字customId="id"，那么后台无法渲染到customId="abc"，但是加入指令v-bind时，就可以渲染为customId="abc"。

v-bind指令可以缩写为冒号：。如：v-bind：customId="id" → ：customId="id"