So implementieren Sie die Funktion „Alle auswählen' in vue.js

Vue.js-Methode zum Implementieren der Select-All-Funktion: Verwenden Sie gewöhnliche Event-Listening-Methoden, um den Datenstatus zu verarbeiten, z. B. [var list = [{title : 'Data One',checked : false,},{title : 'Data Two', geprüft: },{title...].

Die Betriebsumgebung dieses Artikels: Windows10-System, vue.js 2.9, Thinkpad T480-Computer.

In tatsächlichen Projekten können wir die folgenden zwei Methoden verwenden, um die All-Select-Funktion wie folgt zu implementieren:

Methode 1: Nutzen Sie die Eigenschaften von Vuejs vollständig aus und verwenden Sie Berechnungen, um eine Echtzeitüberwachung von Optionsfeldern zu realisieren.

<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;
                });
            }
        }
    }
});

Methode 2: Verwenden Sie normale Methoden zum Abhören von Ereignissen, um den Datenstatus zu verarbeiten.

<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
        }
    }
});

Anweisungen: In Methode 2 wird die Funktion zum Abhören von Ereignissen verwendet, und es kann auch ein Klick verwendet werden, wenn ein Klickereignis verwendet wird ein Fehler in der niedrigeren Version von vuejs. Fehlerbehebungen in höheren Versionen. Der Fehler besteht in der Verzögerung nach der Verwendung des Klickdatenstatus, wenn sich der bidirektionale Bindungsstatus ändert.

Empfohlenes Lernen: php-Schulung

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Funktion „Alle auswählen' in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!