第十一节：动态绑定class和style

前端君 翻身的码农

在第六节《教你如何在html中绑定数据》的章节中，我们学会了如何给视图上的html标签绑定属性。

比如，给 <a> 标签绑定href属性，简单回忆一下：


 <!-- v-bind指令 -->
 <a rel="nofollow" v-bind:href="link"></a>

 <!-- v-bind的缩写 -->
 <a rel="nofollow" :href="link"></a>

我们用 v-bind 指令（以后都用缩写的形式）来动态绑定一个标签的属性。

而这一节，我们特意来学习一下样式的动态绑定，因为它与普通属性的绑定略有不同，并且在实际开发中，动态绑定样式是一定会用到的知识，所以，还是值得我们用一个章节来学习一下它。

老办法，我们先来准备一个vue实例：


 <div id="app">
   <p>这是文字</p>
 </div>
 <script>
    //创建一个实例vm
    const vm = new Vue({
        el:"#app",
        data:{}
    });
 </script>

绑定class

对象语法：我们动态绑定的class的值是一个对象{ }，具体怎么写我们来看看，在上面的代码上稍做修改：


 <div id="app">
   <p :class="{'active':isActive}">这是文字</p>
 </div>
 <script>
    //创建一个实例vm
    const vm = new Vue({
        el:"#app",
        data:{
            isActive:true
        }
    });
 </script>

我们看到给class绑定的是一个对象：{ ‘active’ : isActive }，isActive是我们vm实例的数据，值为true，这与我们平时看到的class是一个字符串值不一样，这种写法，最后会被渲染成什么样呢？

我们运行看看渲染后的效果：

咦？class的值最后被渲染成：“active”，原来，在对象中，若该属性对应的value为true，则该属性会被渲染出来，为false，则被渲染出来。

我们尽快验证一下，我们在上面的代码上再稍作修改：


 <p :class="{
        'active':isActive,
        'danger':isDanger,
        'error':isError
 }">这是文字</p>

我们给class绑定的对象多了2个key和value，我们看看实例的数据data：


 data:{
    isActive:true,
    isDanger:true,
    isError:false
 }

isActive和isDanger的值都为true，isError都为false，猜一下，渲染出来的结果是什么？

看效果：

正和我们所预测的一样，值为true的会被成功渲染出来，为false的则不会被渲染出来。这个时候，你就可以根据需要给渲染出来的class编写样式了。

一旦vm实例对应的数据发生变化，比如isActive的值由true变成false，视图上的’active’ 类也会被删除，这样就会实现动态绑定样式啦！

除了对象语法来绑定class之外，我们还有另一种写法。

数组语法：用数组语法和对象语法来绑定class，又稍有不同。说了是数组语法，那写法就肯定不一样，我们继续来看看：


 <p :class="[activeClass,errorClass]">
    这是文字
 </p>

这个时候，class绑定的值就是一个数组了，数组有两个元素[ activeClass , errorClass ]，它们对应的值是vm实例的数据data，我们看看vm的数据data：


 data:{
    activeClass:'active',
    errorClass:'error'
 }

渲染的时候，activeClass和errorClass对应的值就会被渲染成class。看效果图：

效果跟我们预期一样。这样，我们就可以修改vm实例的数据data，来实现动态修改class的样式了。

绑定内联样式style

除了使用class类以外，我们还可以在style内联样式上下功夫。

绑定内联样式也有2种语法，对象语法和数组语法，但我们这里只介绍常用的对象语法。


 <p :style="{color:colorStyle}">
   这是文字
 </p>

这个时候，我们绑定的就不是class了，是style属性。它的值是一个对象：{ color:colorStyle }，同样，我们来看看vm实例的数据data：


 data:{
    colorStyle:'red'
 }

原来colorStyle我们vm实例的数据，值为red。那是不是我们style中的color对应的颜色是就是red呢？

没错，看来你已经会举一反三了。 看渲染效果，我们验证一样：

没毛病，成功渲染成：style=”color:red”。

因此，我们同样可以修改vm实例的数据data，来实现动态修改视图央视的效果。

本节小结

采取动态绑定class还是动态内联样式style，这个要根据需求分析来具体确定。但较为常用的还是使用绑定class。