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