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

语法糖
v-bind和v-on指令都提供了缩写方式：
v-bind缩写为：“：”
v-on缩写为：“@”
可以动态更新H5元素属性，示例：

Vue语法糖-示例 - 锐客网无语法糖链接文章图片有语法糖链接文章图片

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

Vue绑定class样式-示例 - 锐客网 .active { width: 100px; height: 100px; background: red; }

运行结果是一个红色方块，说明渲染出的界面是加了active的CSS样式的结果。
也可以在对象中传入更多属性用来动态切换多个 class

Vue绑定class样式-示例2 - 锐客网 .active { width: 100px; height: 100px; background: gray; } .text-danger { width: 50px; height: 50px; background: red; }

渲染出的页面结果为:

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

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

.active { width: 100px; height: 100px; background: green; } .text-danger { background: red; }

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

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