vue_v-bind指令绑定class和style
v-bind指令的本质是： 动态更新html元素上的属性值。
关于css样式调用：
在HTML中我们可以使用class和id来选择调用css样式属性。
class在css中被称为“类”，在css样式中以小写的点，“.”来命名，如： .css5{属性:属性值}，而在html页面里则以class="css5"来选择调用，命名好的css又叫css选择器。
我们知道一个html元素如：div、span, button等这些标签元素，都可以设置一些属性值，其中id是元素的名称，可以供js或其它脚本程序来访问该元素对象。
class 属性规定元素的类名（classname）。class 属性大多数时候用于指向样式表中的类（class）。
即： 在class属性中我们可以给一个html元素定义样式。
vue绑定class的几种方式
“
DOM元素经常会动态地绑定一些class类名或style样式，我们可以使用v-bind指令来绑定class和style。
”
v-bind绑定class的几种语法：
1.传递一个对象
<div v-bind:class="{ active: isActive }"></div>
2.传递一个数组
<div v-bind:class="[activeClass, errorClass]"></div>
传递一个对象
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
我们可以传递给v-bind:class一个对象作为参数，以动态地切换class。这个对象中，可以有多个class，而每个class存在与否将取决于数据属性isActive的truthiness。 : class 内的表达式每项为真时，对应的类名就会加载。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-bind:class="{'active': isActive, 'textDanger': hasError }">钢七连</div>
</div>
<script>
var app = new Vue({
el: '#app', //绑定到哪一个元素上
data: {
isActive: true,
hasError: true
}
});
</script>
</body>
</html>
运行结果：
v-bind绑定class
