vue.js에서 모두 선택 기능을 구현하는 방법-View.js-php.cn

vue.js에서 모두 선택 기능을 구현하는 방법

王林

풀어 주다： 2021-10-12 17:48:03

원래의

4526명이 탐색했습니다.

Vue.js 메소드를 사용하여 모두 선택 기능 구현: 일반 이벤트 수신 메소드를 사용하여 [var list = [{title : 'Data One',checked : false,},{title : 'Data'와 같은 데이터 상태를 처리합니다. 2', 확인됨: },{제목...].

vue.js에서 모두 선택 기능을 구현하는 방법

이 기사의 운영 환경: windows10 시스템, vue.js 2.9, thinkpad t480 컴퓨터.

실제 프로젝트에서는 다음 두 가지 방법을 사용하여 all-select 기능을 구현할 수 있습니다.

방법 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에서는 이벤트 청취 기능을 사용하고 변경을 사용하며 클릭도 사용할 수 있습니다. vuejs 하위 버전의 버그 수정 상위 버전에서는 양방향 바인딩 상태가 변경될 때 클릭 데이터 상태를 사용한 후 지연되는 버그가 있습니다.