vue中的class绑定

本文将介绍如何动态绑定html元素的class与style。

首先绑定class的方法有：
1.对象语法绑定

 <div class='sortList'>
 	<ul>
    	<li v-for="item in list">
    		<i v-bind:class="class1:class1Data,class2:class2Data">font-size</i>{{item.sort}}
    	</li>
 	</ul>
 </div>

data如下：

 data(){
	return{
		class1Data:true,
		class2Data:false, 
	}
 }       

如上的操作绑定语法的效果是：只能操控class1和class2是否显示，也就是说class1和class2是最终会显示在网页上的属性名，绑定的class1Data和class2Data只能绑定一个布尔值，只是用来判断最终是否显示class1和class2这两个属性。

举个例子：如果我想添加名为title的这类名，则我就要写:

<div v-bind:class="title:titleData">

就是说这个类名本身还是要写在元素中的，后面titleData才是与data中动态绑定的数据，只能控制最终是否显示title这个类名。这里如果titleData=false的话，最终这个div将不会有title这个类名。

对象语法绑定还可以这样写：

            <div class='sortList'>
                <ul>
                    <li v-for="item in list">
                    	<i v-bind:class="classObject">font-size</i>{{item.sort}
                    </li>
                </ul>
            </div>

data如下：

data(){
	return{
		classObject:{
			className1:true,
			className2:false,
		}
	}
}

只不过是将对象的具体内容全写在了data里面，跟前面的写法本质相同。效果也是一样的。

绑定一个返回对象的计算属性：
模板部分完全与前面一样：

            <div class='sortList'>
                <ul>
                    <li v-for="item in list">
                    	<i v-bind:class="classObject">font-size</i>{{item.sort}
                    </li>
                </ul>
            </div>

computed部分如下：

computed: {
  	classObject: function () {
    	return {
      		className1: true,
      		className2: false,
	}
}

总而言之，对象语法绑定只能用布尔值控制类名是否最终显示。

2.数组语法
模板部分：

           <div class='sortList'>
                <ul>
                    <li v-for="item in list">
                    	<i v-bind:class="[iconfont,iconName]">font-size</i>{{item.sort}}
                    </li> -->
                </ul>
            </div>

data部分：

data(){
	return{
		iconfont:'iconfont',
		iconName:'icon-bussiness-man',
	}
}          	

则最后class里面会显示iconfont和icon-bussiness-man连个类名。
数组语法能直接动态绑定具体的数据。

更多信息可以参考vue官方文档：https://cn.vuejs.org/v2/guide/class-and-style.html#ad