关于复选框，我想只要会点html的，大多数会用，但今天在Vue的实例中遇到一个小小的问题引发了我的思考。在此我先把Vue的实例代码贴出来，再来探讨一下：
单个复选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="javascript/vue.min.js"></script>
</head>
<body>
<p id="app">
<p>单个复选框</p>
<input type="checkbox" id="checkbox" name="checkbox" v-model="message">
<label for="checkbox">{{message}}</label>
</p>
<script>
new Vue({
el:"#app",
data:{
message:false
}
})
</script>
</body>
</html>
<script>
new Vue({
el:"#app",
data:{
message:false
}
})
</script>
看到这里还得再次回顾一下v-model指令与label中的for属性。
1: v-model:前面我已经讲过了：https://blog.csdn.net/tashanhongye/article/details/76467851，看下图：
2:fZ喎?http://www.weiyer.com/Search.asp?KeyWord=/kf/ware/vc/" target="_blank" class="keylink">vcsr00NSjujwvcD4NCjxwcmUgY2xhc3M9"brush:sql;"> for 属性规定 label 与哪个表单元素绑定。
如上面的代码
注意for=”checkbox”绑定的是中的id=”checkbox”而不是：name=”checkbox”
<input type="checkbox" id="checkbox" v-model="message">
下面我们再回过头来看看单个复选框的问题，上面的代码输出的结果如下图：
细心的发现，当我没有勾选单个复选框的时候，选框后面显示的是false;当我勾选单个复选框的时候，选框后面显示的是true;
我们再看看上面的代码，在script中我并没有给message以”true”的初始值啊，为什么我选择复选框的时候后面会显示true呢？
讲到这里其实我也没有更好的解释，但让我想起了vue样式绑定中的一个例子，在这个例子中可以看出它们之间有着相同的逻辑关系。下面我把代码贴出来：
helloworld
<script> new Vue({ el:"#app", data:{ isActive:true } }) </script>显示的结果如下：
当我把下列代码做一点小小的改动时，又会得到另外一种结果：
<script>
new Vue({
el:"#app",
data:{
isActive:false
}
})
</script>
我只是把isActive的值改成：isActive:false.结果就发生了改变。结果如下：
这一次并没有显示active的样式。
两相比较有着相似之处。
