<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id='app'>
<p>输入框</p>
<input type='text' placeholder='-----' v-model='text'>
<p>输入内容：{{ text }}</p>
<hr>
<p>单复选框</p>
<input type='checkbox' id='AAAA' value='Aaaa' v-model='checked'/>
<label for='AAAA'>{{ checked }}</label>
<hr>
<p>多个复选框</p>
<input type='checkbox' id='BB' value='Bb' v-model='checkedNames'/>
<label for='BB'>Bb</label>
<input type='checkbox' id='CC' value='Cc' v-model='checkedNames'/>
<label for='CC'>Cc</label>
<p>选择结果：{{ checkedNames }}</p>
<hr>
<p>单选框</p>
<input type='radio' id='DD' value='dd' v-model='picked'/>
<label for='DD'>dd</label>
<input type='radio' id='EE' value='ee' v-model='picked'/>
<label for='EE'>ee</label>
<hr>
<p>下拉框</p>
<select v-model='selected'>
<option value=''>请选择。。。</option>
<option value='aa'>AA</option>
<option value='bb'>BB</option>
</select>
<hr>
<p>单复选框</p>
<input type='checkbox' id='HH' value='Hh' v-model='checkedOnly' @click="changeAllChecked()"/>
<label for='HH'>{{ checkedOnly }}</label>
<p>多个复选框</p>
<input type='checkbox' id='FF' value='Ff' v-model='checkeds'/>
<label for='FF'>Ff</label>
<input type='checkbox' id='GG' value='Gg' v-model='checkeds'/>
<label for='GG'>Gg</label>
<p>选择结果：{{ checkeds }}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
text: '',
checked: false,
checkedNames: [],
picked:'dd',
selected: '',
checkedOnly: false,
checkeds:[],
checkedAll:["Ff", "Gg"]
},
methods:{
changeAllChecked: function(){
if(this.checkedOnly){
this.checkeds = this.checkedAll
}else{
this.checkeds =[]
}
}
},
watch:{
"checkeds": function(){
if(this.checkeds.length == this.checkedAll.length){
this.checkedOnly = true
} else {
this.checkedOnly = false
}
}
}
})
</script>
</body>
</html>