vue.jsで全選択機能を実装する方法

全選択機能を実装する Vue.js メソッド: [var list = [{title : 'data one',checked : false,},{ などの通常のイベント リスニング メソッドを使用してデータ ステータスを処理します。タイトル : ' データ 2'、チェック済み: },{タイトル...]。

#この記事の動作環境: Windows10 システム、vue.js 2.9、thinkpad t480 コンピューター。

実際のプロジェクトでは、以下の 2 つの方法で全選択機能を実装できます。

方法 1: vuejs の特性を最大限に活用し、computed を使用して単一選択機能を実装します。ボタンのリアルタイム監視。

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

方法 2: 通常のイベント リスニング メソッドを使用してデータのステータスを処理する

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

方法 2 では、イベント リスニング機能が使用され、変更が使用され、クリックも使用できることを説明します。 click イベントを使用する場合、vuejs の下位バージョンにはバグがあり、上位バージョンではバグが修正されています。このバグは、クリック データ状態を使用した後の双方向バインディング状態が変化するときのラグに存在します。

推奨学習:

php トレーニング

以上がvue.jsで全選択機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。