Heim > Web-Frontend > View.js > Hauptteil

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

王林
Freigeben: 2021-10-12 17:48:03
Original
4483 Leute haben es durchsucht

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...].

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

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;
                });
            }
        }
    }
});
Nach dem Login kopieren

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
        }
    }
});
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage