Vue.js 메소드를 사용하여 모두 선택 기능 구현: 일반 이벤트 수신 메소드를 사용하여 [var list = [{title : 'Data One',checked : false,},{title : 'Data'와 같은 데이터 상태를 처리합니다. 2', 확인됨: },{제목...].
이 기사의 운영 환경: 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 : '数据一', checked : false, },{ title : '数据二', checked : true, },{ title : '数据三', checked : true, },{ title : '数据四', checked : true, },{ title : '数据五', checked : true, }]; var vm = new Vue({ el : '#app', 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 : '数据一', checked : false, },{ title : '数据二', checked : true, },{ title : '数据三', checked : true, },{ title : '数据四', checked : true, },{ title : '数据五', checked : true, }]; var vm = new Vue({ el : '#app', 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 하위 버전의 버그 수정 상위 버전에서는 양방향 바인딩 상태가 변경될 때 클릭 데이터 상태를 사용한 후 지연되는 버그가 있습니다.
추천 학습: php training
위 내용은 vue.js에서 모두 선택 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!