八、动态绑定class和style 八、动态绑定class和style

用 v-bind 指令（以后都用缩写的形式）来动态绑定一个标签的属性。
一、绑定class （1）对象语法来绑定class：动态绑定的class的值是一个对象{ ‘active’ : isActive }，isActive是我们vm实例的数据，值为true，

这是文字

文章图片
渲染成功
释：class的值最后被渲染成：“active danger”，在对象中，值为true的会被成功渲染出来，为false的则不会被渲染出来。
一旦vm实例对应的数据发生变化，比如isActive的值由true变成false，视图上的’active’ 类也会被删除，这样就会实现动态绑定样式啦！
eg:之前的一个例子动态绑定class

/* 默认状态下*/ #app div div cite{ background: darkred; color: #fff; } /* 没有结束状态下*/ #app div div .finish{ background:#ccc; color: #000000; }

文章图片
动态加载class成功 （2）数组语法语法来绑定class：动态绑定的class的值是数组有两个元素[ activeClass , errorClass ]，它们对应的值是vm实例的数据data：

这是数组语法

文章图片
渲染成功
释：渲染的时候，activeClass、errorClass和borderClass对应的值就会被渲染成class。
二、绑定内联样式style （1）对象语法来绑定class：看着非常像 CSS ，其实它是一个 JavaScript 对象。 CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）：