代码块（点击展开）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-model应用</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 添加水果数据 -->
<div>
<input type="text" v-on:keyup.enter="addItem()" v-model="item">
</div>
<!-- 删除水果数据 -->
<ul>
<li v-for="(it,index) in items">
{{it.text}}<button v-on:click="removeItem(index)">X</button>
</li>
</ul>
<!-- 全选水果选项 -->
<div>
<input type="checkbox" value="香蕉" v-model="checkFruits" />香蕉
<input type="checkbox" value="苹果" v-model="checkFruits" />苹果
<input type="checkbox" value="芒果" v-model="checkFruits" />芒果
<input type="checkbox" value="芭乐" v-model="checkFruits" />芭乐
</div>
<p>
<button @click="allChecked">全选</button>
<button @click="allnotChecked()">全不选</button>
<button @click="reverseChecked()">反选</button>
</p>
<div>
{{result}}
</div>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
item: "",
items: [{
text: "苹果"
}, {
text: "香蕉"
}],
checkFruits: [],
fruits: ["香蕉", "苹果", "芒果", "芭乐"],
tempArr: []
},
methods: {
addItem: function() {
var txt = this.item.replaceAll(' ', '');
if (txt) {
this.items.push({
text: txt
});
}
this.item = "";
},
removeItem: function(idx) {
this.items.splice(idx, 1);
},
allChecked: function() {
this.checkFruits = this.fruits;
},
allnotChecked: function() {
this.checkFruits = [];
},
reverseChecked: function() {
this.tempArr = [];
for (var i = 0; i < this.fruits.length; i++) {
if (!this.checkFruits.includes(this.fruits[i])) {
this.tempArr.push(this.fruits[i]);
}
}
this.checkFruits = this.tempArr;
}
},
computed: {
result: function() {
var show = "您选中的水果是：";
for (var i = 0; i < this.checkFruits.length; i++) {
show += this.checkFruits[i] + "";
}
return show;
}
},
// watch:用于监听data里面的数据是否被修改，一旦修改就可以执行一些其他的操作【也是方法】
watch:{
"checkFruits":function(){
if(this.checkFruits.length>0){
this.checked = true;
}else{
this.checked = false;
}
}
}
})
</script>
