序
实现了之前代码的删除功能，并加入了对于复选框的全选，全不选，反选等功能
示例代码
展开查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input v-model="item" v-on:keyup.enter="adds" />
<ul v-for="(i,index) in items">
<li>{{i.text}}<button @click="removes(index)">X</button></li>
</ul>
<div >
<input type="checkbox" value="香蕉" v-model="Fruits" />香蕉
<input type="checkbox" value="苹果" v-model="Fruits" />苹果
<input type="checkbox" value="芒果" v-model="Fruits" />芒果
<input type="checkbox" value="芭乐" v-model="Fruits" />芭乐
<p>
<button @click="allChecked">全选</button>
<button @click="allNotCheck()">全不选</button>
<button @click="reverseCheck()">反选</button>
</p>
{{showfruit()}}
</div>
</div>
</body>
<script>
var wm = new Vue({
el:"#app",
data:{
item:"",
items:[{text:'苹果'},{text:'香蕉'}],
Fruits:[],
fruit:['香蕉','苹果','芒果','芭乐'],
tempArr:[]
},
methods:{
adds:function(){
var txt=this.item.trim();
if(txt){
this.items.push({text:txt});
this.item='';
}
},
removes:function(idx){
this.items.splice(idx,1);
},
allChecked:function(){
this.Fruits=this.fruit;
},
allNotCheck:function(){
this.Fruits=[];
},
reverseCheck:function(){
this.tempArr=[];
for(var i=0;i<this.fruit.length;i++){
if(!this.Fruits.includes(this.fruit[i])){
this.tempArr.push(this.fruit[i]);
}
}
this.Fruits=this.tempArr;
},
showfruit:function(){
var Str="你选择了水果有："
if(!this.Fruits.length<1){
for(var i=0;i<this.Fruits.length;i++){
Str=Str+this.fruit[i];
}
return Str;
}
}
}
})
</script>
</html>
运行效果
