Maison >interface Web >Voir.js >Comment implémenter la fonction select all dans vue.js

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

王林
王林original
2021-10-12 17:48:034513parcourir

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

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

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn