Vue教程-Vue语法糖与v-bind绑定CSS样式-学习vue第一站深入浅出（五）

语法糖

v-bind和v-on指令都提供了缩写方式：

v-bind缩写为：“：”

v-on缩写为：“@”

可以动态更新H5元素属性，示例：

	
		
		
	
	
		
 
			无语法糖链接
			
			

			有语法糖链接
			
		
		
		
	

在前端工程师的日常工作中，最常用的是动态设置class属性与style样式，方法如下：

运行结果是一个红色方块，说明渲染出的界面是加了active的CSS样式的结果。

也可以在对象中传入更多属性用来动态切换多个 class 

渲染出的页面结果为:

  此外，我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式：

数组语法

我们可以把一个数组传给 v-bind:class ，实例如下：

---