vue.js怎么實(shí)現(xiàn)全選功能

這篇文章將為大家詳細(xì)講解有關(guān)vue.js怎么實(shí)現(xiàn)全選功能，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

vue.js實(shí)現(xiàn)全選功能的方法：使用普通的事件監(jiān)聽方式處理數(shù)據(jù)狀態(tài)，例如【var list = [{title : '數(shù)據(jù)一',checked : false,},{title : '數(shù)據(jù)二',checked : },{title...】。

本文操作環(huán)境：windows10系統(tǒng)、vue.js 2.9、thinkpad t480電腦。

在實(shí)際項(xiàng)目中我們可以使用如下兩種方式來實(shí)現(xiàn)全選功能，具體如下：

方式一：完全發(fā)揮了 vuejs 的特性，使用了 computed 實(shí)現(xiàn)了對 單選按鈕的實(shí)時(shí)監(jiān)控。

<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 : '數(shù)據(jù)一',
        checked : false,
    },{
        title : '數(shù)據(jù)二',
        checked : true,
    },{
        title : '數(shù)據(jù)三',
        checked : true,
    },{
        title : '數(shù)據(jù)四',
        checked : true,
    },{
        title : '數(shù)據(jù)五',
        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;
                });
            }
        }
    }
});

方式二：使用普通的事件監(jiān)聽方式處理數(shù)據(jù)狀態(tài)

<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 : '數(shù)據(jù)一',
        checked : false,
    },{
        title : '數(shù)據(jù)二',
        checked : true,
    },{
        title : '數(shù)據(jù)三',
        checked : true,
    },{
        title : '數(shù)據(jù)四',
        checked : true,
    },{
        title : '數(shù)據(jù)五',
        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
        }
    }
});

說明在方式二中使用了事件監(jiān)聽函數(shù)，使用了change，也可以使用 click，使用click事件時(shí)，低版本的vuejs存在 bug，高版本中 bug 修復(fù)，bug 存在于，在雙向綁定狀態(tài)改變時(shí) 使用click數(shù)據(jù)狀態(tài)后滯后。

關(guān)于“vue.js怎么實(shí)現(xiàn)全選功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。