Vue学习——v-bind绑定class用法

1.通过v-bind可以为一个标签绑定多个类：

	.big{
		font-size: 30px;
	}

	.italic{
		font-style: italic
	}

	.red{
		color:red;
	}

<div id="bind_test2">
	<p :class="['red', 'big', 'italic']">测试字符串</p>
</div>

2.还可以在class数组中使用三元表达式：

<div id="bind_test2">
	<p :class="['red', 'big', flag ? 'italic':'']">测试字符串</p>
</div>

var bind_test2 = new Vue({
	el: "#bind_test2",
	data: {
		flag: false
	},
	methods: {

	}
})

flag的值为false，因此不引入italic类

3.还可以用对象代替三元表达式

<div id="bind_test2">
	<p :class="['red', 'big', {'italic': flag}]">测试字符串</p>
</div>

4.也可以直接在class中传一个对象。注意：对象中的key可以加引号，也可以不加引号

<div id="bind_test2">
	<p :class="{red : true, italic : true, big: true}">测试字符串1</p>
	<p :class="{'red' : true, 'italic' : true, 'big': true}">测试字符串2</p>
</div>

5.上面这种写法也可以改写成如下形式：

<div id="bind_test2">
	<p :class="classObj">测试字符串</p>
</div>

var bind_test2 = new Vue({
	el: "#bind_test2",
	data: {
		flag: false,
		classObj: {red : true, italic : true, big: true}
	},
	methods: {

	}
})