Vuejs之路之--style和class的绑定

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性 ，我们可以用v-bind 处理它们，在 v-bind 用于 class 和 style 时，表达式的结果类型除了字符串之外，还可以是对象或数组。

直接上代码：

	
	
	


	

		
		
{{link}}
		
{{link}}

		
		
{{link}}

		
		切换class


		
		
{{link}}

		
		
{{link}}

		
		
{{plan}}
		
	
	
	

其实绑定class类名还可以用在组件上,但是用法是一样的只不过你在组件上班绑定的class类名将最终绑定在根元素上，其他的也没什么 。

总之：

对象方式： 

1.当condition1为真的时候，才会为该元素添加class名addback,否则就不添加，如果要控制多个class名只需要将其用逗号隔开就行了。

2.也可以直接绑定数据里的对象，因为最终还是个对象，本身就是对象。

3.当然我们也可以绑定为返回对象的计算属性（return出来的是一个对象，结合上文容易理解）

数组方式： 当然我们也可以绑定为一个数组,数组的元素是将要应用的class类名的键，我们还可以在数组里面利用三元表达式
数组和对象： 我们还可以在数组形式中利用对象形式