Bagaimana untuk melaksanakan fungsi pilih semua dalam vue.js

Cara vue.js melaksanakan fungsi pilih-semua: Gunakan kaedah mendengar peristiwa biasa untuk memproses status data, seperti [var list = [{title : 'Data One',checked : false,},{title : ' Data dua', disemak: },{tajuk...].

Persekitaran pengendalian artikel ini: sistem windows10, vue.js 2.9, komputer thinkpad t480.

Dalam projek sebenar, kita boleh menggunakan dua kaedah berikut untuk melaksanakan fungsi semua pilih, seperti berikut:

Kaedah 1: Menggunakan sepenuhnya ciri-ciri vuejs dan menggunakan pengiraan untuk melaksanakan pemilihan tunggal Pemantauan masa nyata butang.

<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 : &#39;数据一&#39;,
        checked : false,
    },{
        title : &#39;数据二&#39;,
        checked : true,
    },{
        title : &#39;数据三&#39;,
        checked : true,
    },{
        title : &#39;数据四&#39;,
        checked : true,
    },{
        title : &#39;数据五&#39;,
        checked : true,
}];
 
var vm = new Vue({
    el : &#39;#app&#39;,
    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;
                });
            }
        }
    }
});

Kaedah 2: Gunakan kaedah mendengar peristiwa biasa untuk memproses status data

<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 : &#39;数据一&#39;,
        checked : false,
    },{
        title : &#39;数据二&#39;,
        checked : true,
    },{
        title : &#39;数据三&#39;,
        checked : true,
    },{
        title : &#39;数据四&#39;,
        checked : true,
    },{
        title : &#39;数据五&#39;,
        checked : true,
}];
 
var vm = new Vue({
    el : &#39;#app&#39;,
    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
        }
    }
});

Penjelasan bahawa dalam kaedah 2, fungsi mendengar peristiwa digunakan, perubahan digunakan dan klik boleh juga digunakan. Apabila menggunakan acara klik, terdapat pepijat dalam versi yang lebih rendah daripada vuejs Pepijat itu wujud dalam ketinggalan selepas menggunakan keadaan data klik apabila keadaan mengikat dua hala .

Pembelajaran yang disyorkan: latihan php

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi pilih semua dalam vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!