这次给大家带来vue实现全选反选功能案例详解,vue实现全选反选功能的注意事项有哪些,下面就是实战案例,一起来看一下。
全选功能可以说是前端开发中非常常见的一个功能,以前的项目开发用jQuery开发比较多。最近在使用vue前端框架重构之前的项目。从jQuery到vue的转变主要是一个思想想的转变,是将原有的直接操作dom的思想转变到操作数据,用数据驱动dom,也是vue框架的一个核心思想,思想转变过来,对功能的实现自然容易理解一些。
例如下面这个简单的demo

按照jQuery的思想来做的话,要选中全选checkbox和所有的checkbox项,分别注册选中事件,判断选中状态来给相关的checkbox设置对应的状态,这就涉及到很多的dom操作。
下面就看一下vue数据驱动dom的思想来实现这一功能。
vue数据驱动dom实现功能
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <p class = "checkbox" >
<label for = "quan" >
<!-- 这里的 $event 是将当前对象传入进去,具体详情请参照vue官方文档 -->
<input id= "quan" type= "checkbox" @click= "checkAll($event)" > 全选
</label>
<label>
<!-- v-model 双向数据绑定命令 -->
<input class = "checkItem" type= "checkbox" value= "apple" v-model= "checkData" > apple
</label>
<label>
<input class = "checkItem" type= "checkbox" value= "banana" v-model= "checkData" > banana
</label>
<label>
<input class = "checkItem" type= "checkbox" value= "orange" v-model= "checkData" > orange
</label>
</p>
<script>
new Vue({
el: '#app' ,
data(){
return {
checkData: []
}
},
watch: {
checkData: {
handler(){
if (this.checkData.length == 3){
document.querySelector( '#quan' ).checked = true;
} else {
document.querySelector( '#quan' ).checked = false;
}
},
deep: true
}
},
methods: {
checkAll(e){
var checkObj = document.querySelectorAll( '.checkItem' );
if (e.target.checked){
for ( var i=0;i<checkObj.length;i++){
if (!checkObj[i].checked){
this.checkData.push(checkObj[i].value);
}
}
} else {
this.checkData = [];
}
}
}
});
</script>
|
登录后复制
利用vue的双向数据绑定v-model命令,当勾选时,checkbox的value值会自动push到所绑定的数组checkData中去,省去了不少对dom的操作。
如果是固定选项这样是可以实现的,但是这种方法有一些弊端,双向绑定数组数据是写死的,不太灵活,如果增加了checkbox选项,要更改wach里绑定数组的长度判断。
有时候checkbox选项也是后台动态获取过来的,这样也灵活一些。
例如后台数据是这样的:
1 2 3 4 5 6 7 8 9 10 | ajaxData: [{
name: 'a' ,
value: 'apple'
},{
name: 'b' ,
value: 'banana'
},{
name: 'c' ,
value: 'orange'
}]
|
登录后复制
需要先动态渲染checkbox选项,在进行数据绑定。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <p id= "app" >
<p class = "checkbox" >
<label for = "quan" >
<!-- 这里的 $event 是将当前对象传入进去,具体详情请参照vue官方文档 -->
<input id= "quan" type= "checkbox" @click= "checkAll($event)" > 全选
</label>
<label v- for = "item in ajaxData" >
<!-- v-model 双向数据绑定命令 -->
<input class = "checkItem" type= "checkbox" :value= "item.value" v-model= "checkData" > {{item.name}}
</label>
</p>
</p>
<script>
new Vue({
el: '#app' ,
data(){
return {
ajaxData: [{
name: '选项1' ,
value: 'apple'
},{
name: '选项2' ,
value: 'banana'
},{
name: '选项3' ,
value: 'orange'
}],
checkData: []
}
},
watch: {
checkData: {
handler(){
if (this.checkData.length == this.ajaxData.length){
document.querySelector( '#quan' ).checked = true;
} else {
document.querySelector( '#quan' ).checked = false;
}
},
deep: true
}
},
methods: {
checkAll(e){
if (e.target.checked){
this.ajaxData.forEach((el,i)=>{
if (this.checkData.indexOf(el.value) == '-1' ){
this.checkData.push(el.value);
}
});
} else {
this.checkData = [];
}
}
}
});
</script>
|
登录后复制

方法并不是最优的写法,也存在一些弊端,欢迎各位指点迷津,一起探讨。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
vue实现搜索列表内容
axios发送post请求提交图片表单步骤详解
以上是vue实现全选反选功能案例详解的详细内容。更多信息请关注PHP中文网其他相关文章!