Comment implémenter la fonction select all dans vue.js-Voir.js-php.cn

Comment implémenter la fonction select all dans vue.js

王林

Libérer： 2021-10-12 17:48:03

original

4526 Les gens l'ont consulté

Méthode Vue.js pour implémenter la fonction tout sélectionner : utilisez des méthodes d'écoute d'événements ordinaires pour traiter l'état des données, telles que [var list = [{title : 'Data One',checked : false,},{title : 'Data One' Deux', coché : },{titre...].

Comment implémenter la fonction select all dans vue.js

L'environnement d'exploitation de cet article : système windows10, vue.js 2.9, ordinateur thinkpad t480.

Dans les projets réels, nous pouvons utiliser les deux méthodes suivantes pour implémenter la fonction de sélection totale, comme suit :

Méthode 1 : utiliser pleinement les caractéristiques de vuejs et utiliser le calcul pour réaliser une surveillance en temps réel des boutons radio.

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

Copier après la connexion

Méthode 2 : Utilisez des méthodes d'écoute d'événements ordinaires pour traiter l'état des données

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

Copier après la connexion

Instructions : Dans la méthode 2, la fonction d'écoute d'événements est utilisée, le changement est utilisé et le clic peut également être utilisé. Lors de l'utilisation de l'événement click, il y a. un bug dans la version inférieure de vuejs. Corrections de bugs dans les versions supérieures. Le bug existe dans le décalage après l'utilisation de l'état des données de clic lorsque l'état de la liaison bidirectionnelle change.

Apprentissage recommandé : Formation php

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!