<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
</head>
<style>
.class1{
background: #444;
color: #eee;
}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="app">
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1': use}">
v-bind:class 指令
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
use: false
}
});
</script>
</body>上面这段代码，上来我冒出来的第一个问题是：
label标签的for属性，是个什么东西？
for属性，主要是规定了label和哪个表单元素绑定。
label标签到底是有什么用呢？
在html当中，<label>标签通常都是和<input>标签一起使用的。
<label>标签为input元素定义了标注。
实际上，这个label标签的作用就是，为鼠标用户改进了可用性。
用户点击label标签中的文本的时候，浏览器就把焦点自动转移到label绑定的控件上。
v-model="use"这句话是什么意思呢？
这个意思就比较巧妙。
v-model这里肯定表示是有用户输入的。
把用户输入的值，要给到vue实例当中的use这个属性。
v-bind:class="{'class1': use}"
这句话才是我们今天要讲解的重点。
v-bind是html当中条件属性。
你想想，如果属性是一个静态属性，那么直接就去引入css的代码该多好。
我尼玛就是要一个条件属性，所以才是要用到v-bind的。
首先这里的理解,v-bind只是一种写法，本身并没有什么了不得的意义。
但是class=""，这个是html的属性的标准写法。
但是引号里面的东西是:
{'class1':use}，这个语法，比较晦涩。
但是从运行结果上能猜个七七八八。
use为真，那么就用class1的样式。
use为假，那么就不用class1的样式。