Vue2.0学习--基础--4--Class与Style绑定

（day5）

操作元素的class列表和内联样式是数据绑定的一个常见需求。

因为它们都是attribute（也就是每个元素的class属性和style属性），所以我们可以用v-bind处理它们：只需要表达式计算出字符串结果即可。（也就是说，在HTML中 class和style属性后面都是接一个双引号括起来的字符串值）

但是字符串拼接麻烦且易错。

所以，在使用 v-bind 将 class 与 style 与特定的值绑定在一起的时候，Vue.js做了专门的增强——表达式结果的类型除了字符串以外，还可以是对象或数组。

接下来就要重点讲解通过 v-bind 将 class 、 style 属性同对象、数组值绑定在一起。

绑定HTML Class

 大致从两个方面来展现这一内容——通过 v-bind 将class属性同对象值绑定在一起，通过 v-bind 将class属性同数组值绑定在一起。

1、# 对象语法

给 v-bind:class 直接传入一个对象（直接为对象设置值、设定多个值、和普通的class attribute共存）、给 v-bind:class 传入一个字符串表示的对象名（对象值可以是一个data选中的对象属性、可以是一个计算属性（computed选项中的对象属性））。

 ①、传给 v-bind:class 一个对象，动态的切换class：

#直接设置对象值

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

#设定多个值以及同普通的class属性共存

<div
    id="app" 
    class="static" 
    v-bind:class="{ active:isActive, 'text-danger:hasError' }">
</div>

在Vue实例的data选项中设定这些属性的值：

var vm = new Vue({
    el:"#app",
    
    data:{
        isActive:true,
        hasError:false
    }
});

那么这个<div></div>就会被渲染成为 <div id="app" class="static active"></div> ，如果hasError的值为true，那么就会被渲染成为 <div id="app" class="static active hasError"></div> 。

②、传给v-bind:class一个对象名

这种方式就是不直接传给class属性一个对象，而是在Vue实例中将对象定义好以后，直接将这个对象的对象名传递给 v-bind:class 。

#将data选项中的对象传递给v-bind:class。

<div v-bind:class="classObject"></div>

（为了突出v-bind:class这个重点，这里忽略了id属性同Vue的el相绑定，这里直接展示data中响应的对象）

data:{
    classObject:{
        active:true,
        'text-danger':false
    }
}

渲染的结果和前面的一样。

#将computed选项中的对象传递给v-bind:class。

（即绑定一个返回对象的计算属性。这是一个常用且强大的模式）

<div v-bind:class="classObject"></div>

data:{
    isActive:true,
    error:null
},

computed:{
    classObject:funciton(){
        return {
            active:this.isActive && !this.error,
            'text-danger':this.error && this.error.type === 'fatal'
        }
    }
}

2、# 数组语法

 #也就是向 v-bind:class 传递一个数组值。

<div v-bind:class="[activeClass,errorClass]"></div>

data:{
    activeClass:'active',
    errorClass:'text-danger'
}

上面这种方式就将HTML中的这个<div></div>渲染成：

<div class="active text-danger"></div>

#在数组中使用三元表达式

我们发现对象语法可以通过设定isActive、hasError等属性值的truthiness，来动态的设定这个HTML元素的class属性。而在上面这种数组语法，我们似乎不能动态的改变active、text-danger，只能通过将它们删除、添加等方式来动态的操作。怎么办呢？

三元表达式或者在数组中使用对象语法。

三元表达式：

<div v-bind:class="[isActive ? activeClass : '',errorClass]"></div>

（这里将始终添加errorClass，而是否添加activeClass由isActive的值动态决定）

 #在数组中使用对象语法

一个原因是上面提到的，但主要原因还是——当有多个class时，在数组中一直使用三元表达式会很繁琐，这个时候，可以在数组中使用对象表达式：

<div v-bind:class="[{active:isActive},errorClass]"></div>

3、# 用在组件上

 这个章节假设你已经对Vue组件有一定的了解。当然你也可以先跳过这里，稍后回过头来看。

当在一个自定义组件上使用 class property时，这些class将被添加到该组件的根元素上面。这个元素上已经存在的class不会被覆盖。

 例如，如果你声明了这个组件：

Vue.component('my-component',{
    template:'<p class="foo bar">Hi</p>'
});

然后在使用它的时候添加一些class：

<my-component class="baz boo"></my-component>

HTML将被渲染为：

<p class="foo bar baz boo">Hi</p>

对于带数据绑定的class也同样适用：

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

当isActive为true时，HTML将会被渲染成为：

<p class="foo bar active"></p>

绑定内联样式

 v-bind:style=".."，同样是分为两个大的方向来理解：向这个表达式传递一个对象、想这个表达式传递一个数组。

1、#对象语法

两种情况：直接绑定一个对象、绑定一个对象名。

#直接绑定一个对象：

<div v-bind:style="{ color:activeColor, fontSize:fontSize + "px" }"></div>

data:{
    activeColor:'red',
    fontSize:30
}

#直接绑定一个样式对象（通常这样更好，让模板更加清晰）：

<div v-bind:style="styleObject"></div>

data:{
    styleObject:{
        color:'red',
        fontSize:'13px'
    }
}

（与绑定class 一样，对象语法常常结合返回对象的计算属性使用）

2、# 数组语法

 数组语法可以将多个样式对象对应到同一个元素上：

<div v-bind:style="[baseStyle,overridingStyles]"></div>

3、# 自动添加前缀

当 v-bind:style 使用需要添加浏览器引擎前缀的CSS property时，如 transform ，Vue.js会自动侦测并添加相应的前缀。

4、# 多重值 

 Vue2.3.0开始，可以向 v-bind:style=“..” 中绑定的property提供一个包含多个值的数组，常用于提供多个带前缀的值。如：

<div v-bind:style="{ display:['-webket-box','-ms-flexbox','flex'] }"></div>

这样写只会渲染数组中最后一个被浏览器支持的值。

也就说，在本例中，如果浏览器不支持带前缀的flexbox，那么就只会渲染 display:flex 。

以上就是class与style的绑定全部的基础内容：

也就是 v-bind:class=".." 以及 v-bind:style=".." 中绑定数据的学习。

这里面绑定数据可以是对象，也可以是数组。

至于这个v-bind的绑定功能是怎么实现的，还需要以后再去理解。