vue.js實作全選功能的方法：使用普通的事件監聽方式處理資料狀態，例如【var list = [{title : '資料一',checked : false,},{title : '數據二',checked : },{title...】。
本文操作環境：windows10系統、vue.js 2.9、thinkpad t480電腦。
在實際專案中我們可以使用以下兩種方式來實現全選功能，具體如下：
方式一：完全發揮了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;
});
}
}
}
});方式二：使用普通的事件監聽方式處理資料狀態
<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
}
}
});說明在方式二中使用了事件監聽函數，使用了change，也可以使用click，使用click事件時，低版本的vuejs存在bug，高版本中bug 修復，bug 存在於，在雙向綁定狀態改變時使用click資料狀態後滯後。
推薦學習：php培訓
以上是vue.js如何實現全選功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
