首页 >web前端 >Vue.js > 正文

vue.js如何实现全选功能

原创2021-10-12 17:48:030764

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

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

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

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

<div id="app">
    <div class="box">
        <div class="title">
            <label><input type="checkbox" v-model="status">全选</label>
        </div>
        <ul>
            <li v-for="item,index of list"><label>
                <input type="checkbox" v-model="item.checked">{{item.title}}</label>
            </li>
        </ul>
    </div>
</div>
 
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;
                });
            }
        }
    }
});

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

<div id="app">
    <div class="box">
        <div class="title"><label>
        <input type="checkbox" 
            v-model="status" 
            @change="allCheck">全选</label></div>
        <ul>
            <li v-for="item,index of list">
                <label><input type="checkbox" 
                v-model="item.checked" 
                @change="singleCheck">{{item.title}}</label></li>
        </ul>
    </div>
</div>
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培训

以上就是vue.js如何实现全选功能的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 相关标签:vue.js 全选功能
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    推荐视频教程
  • 2天速成VueJS免费公益直播课2天速成VueJS免费公益直播课
  • vue+tp分离开发实时疫情动态地图(公益直播实战)vue+tp分离开发实时疫情动态地图(公益直播实战)
  • VuePress: 30分钟制作一个Vue静态网站VuePress: 30分钟制作一个Vue静态网站
  • 视频教程分类