vue.js如何实现全选功能

vue.js实现全选功能的方法：使用普通的事件监听方式处理数据状态，例如【var list = [{title : '数据一',checked : false,},{title : '数据二',checked : },{title...】。

本文操作环境：windows10系统、vue.js 2.9、thinkpad t480电脑。

在实际项目中我们可以使用如下两种方式来实现全选功能，具体如下：

方式一：完全发挥了 vuejs 的特性，使用了 computed 实现了对 单选按钮的实时监控。

    

        

            全选
        
        

            

                {{item.title}}
            
        
    

 
var list = [
    {
        title : '数据一',
        checked : false,
    },{
        title : '数据二',
        checked : true,
    },{
        title : '数据三',
        checked : true,
    },{
        title : '数据四',
        checked : true,
    },{
        title : '数据五',
        checked : true,
}];
 
var vm = new Vue({
    el : '#app',
    data:{
        list
    },
    computed:{
        status:{
            get(){
                return this.list.filter( item => item.checked ).length === this.list.length
            },
            set( value ){
                this.list.map(function( item ){
                    item.checked = value;
                    return item;
                });
            }
        }
    }
});

方式二：使用普通的事件监听方式处理数据状态

中国地图网点分布情况提示查看特效JS代码

中国地图网点分布情况提示查看特效JS代码，网点标注内容可以放图片、地址、电话信息，通常用在 公司网点全国分布点查询，例如快递网点、分公司网点，还是很实用的功能，基于jQuery实现。

下载

立即学习“前端免费学习笔记（深入）”；

    

        

        全选
        

            

                {{item.title}}
        
    

var list = [
    {
        title : '数据一',
        checked : false,
    },{
        title : '数据二',
        checked : true,
    },{
        title : '数据三',
        checked : true,
    },{
        title : '数据四',
        checked : true,
    },{
        title : '数据五',
        checked : true,
}];
 
var vm = new Vue({
    el : '#app',
    data : {
        list,
        status : this.list.filter( item => item.checked ).length === this.list.length ? true : false
    },
    methods : {
        allCheck(){
            this.list.map(function( item ){
                item.checked = this.status;
                return item;
            }.bind(this));
        },
        singleCheck(){
            this.status = this.list.filter( item => item.checked ).length === this.list.length ? true : false
        }
    }
});

说明在方式二中使用了事件监听函数，使用了change，也可以使用 click，使用click事件时，低版本的vuejs存在 bug，高版本中 bug 修复，bug 存在于，在双向绑定状态改变时 使用click数据状态后滞后。

推荐学习：php培训