<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>vue学习 语法demo1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
<p><input type="checkbox" v-model="selectAll">{{selectAll_title}}</p>
去过的城市 <input type="checkbox" v-model="city.bj" />北京 <input type="checkbox" v-model="city.sh" />上海<input type="checkbox" v-model="city.gz" />广州 <input type="checkbox" v-model="city.sz" />深圳
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
selectAll:false,
selectAll_title:"全选",
city:{
bj:false,
sh:false,
gz:false,
sz:false
}
},
filter:{
},
watch:{
selectAll:function(newValue,oldValue){
if(newValue){
this.city.bj=true;
this.city.sh=true;
this.city.gz=true;
this.city.sz=true;
this.selectAll_title="反选";
}else{
this.city.bj=false;
this.city.sh=false;
this.city.gz=false;
this.city.sz=false;
this.selectAll_title="全选";
}
}
},
methods:{
}
});
</script>
</body>
</html>
