标签：function tempArr text checkFruits 实例 fruits var model
<details>
<summary>代码块（点击展开）：</summary>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>new</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>
{{selectChecked()}}
</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;
},
selectChecked:function(){
var str = "您选中的水果是：";
if(!this.checkFruits.length<1){
for(var i = 0;i < this.fruits.length;i++){
str = str + this.fruits[i];
}
return str;
}
}
}
})
</script>
</html>
</details>
标签：function,
tempArr,
text,
checkFruits,
实例,
fruits,
var,
model
From： https://www.cnblogs.com/bloger37/p/16739505.html