当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue2.0 实现全选和全不选

vue2.0 实现全选和全不选

2019年02月27日  | 移动技术网IT编程  | 我要评论

实现思路：

1、 v-model 一个收集所有input（除全选框外）数组checkmodel ，vue会动态将其checked为true的input的value值存入数组checkmodel里

2 、watch函数来监听checkmodel 属性，当其长度==input元素时 全选按钮选中 否则取消

3 、全选按钮v-model checked 属性来显示当前选中状态 click事件里 当checked为true时 全选 所有input按钮被选中也就是checkmodel的遍历存入其value值

html代码：

<div>
　　<input type="checkbox" @click="checkall" v-model="checked">
　　<span>全选</span>
</div>
<ul>
　　<li v-for="(item,index) in list" :key="index" style="margin-top:20px;">
　　　　<input type="checkbox" v-model="checkmodel" :value="item.id">
　　　　<span>{{item.name}}--</span>
　　　　<span>{{item.age}}--</span>
　　　　<span>{{item.money}}元</span>
　　　　<mt-button @click="remove(index)" type="primary">删除</mt-button>
　　</li>
</ul>

js代码：

data(){
　　return {
　　　　list:[
　　　　　　{id:1,name:"明明",age:23,money:100},
　　　　　　{id:2,name:"红红",age:18,money:200},
　　　　　　{id:3,name:"强强",age:29,money:300}
　　　　],
　　　　checked:false, //是否全选
　　　　checkmodel:[] //双向数据绑定的数组，我是用的id
　　}
},
watch:{
　　checkmodel(){
　　　　if(this.checkmodel.length==this.list.length){
　　　　　　this.checked=true;
　　　　}else{
　　　　　　this.checked=false;
　　　　}
　　}
},
methods:{　　
　　checkall(){
　　　　if(this.checked){
　　　　　　this.checkmodel=[];
　　　　}else{
　　　　　　this.list.foreach((item)=>{
　　　　　　if(this.checkmodel.indexof(item.id)==-1){
　　　　　　　　this.checkmodel.push(item.id)
　　　　　　}
　　　　　　})
　　　　}
　　}
}

效果如图：

alt

注：删除效果我用的是element-ui，有兴趣的朋友可以研究下

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网