全選功能可以說是前端開發(fā)中非常常見的一個功能肌毅,以前的項目開發(fā)用jQuery開發(fā)比較多。最近在使用vue前端框架重構之前的項目姑原。從jQuery到vue的轉變主要是一個思想想的轉變悬而,是將原有的直接操作dom的思想轉變到操作數(shù)據(jù),用數(shù)據(jù)驅動dom锭汛,也是vue框架的一個核心思想笨奠,思想轉變過來,對功能的實現(xiàn)自然容易理解一些唤殴。
例如下面這個簡單的demo
按照jQuery的思想來做的話般婆,要選中全選checkbox和所有的checkbox項,分別注冊選中事件朵逝,判斷選中狀態(tài)來給相關的checkbox設置對應的狀態(tài)蔚袍,這就涉及到很多的dom操作。
下面就看一下vue數(shù)據(jù)驅動dom的思想來實現(xiàn)這一功能配名。
vue數(shù)據(jù)驅動dom實現(xiàn)功能
<div class="checkbox" id="app">
<label for="quan">
<!-- 這里的 $event 是將當前對象傳入進去啤咽,具體詳情請參照vue官方文檔 -->
<input id="quan" type="checkbox" @click="checkAll($event)"> 全選
</label>
<label>
<!-- v-model 雙向數(shù)據(jù)綁定命令 -->
<input class="checkItem" type="checkbox" value="apple" v-model="checkData"> apple
</label>
<label>
<input class="checkItem" type="checkbox" value="banana" v-model="checkData"> banana
</label>
<label>
<input class="checkItem" type="checkbox" value="orange" v-model="checkData"> orange
</label>
</div>
<script>
new Vue({
el: '#app',
data(){
return {
checkData: [] // 雙向綁定checkbox數(shù)據(jù)數(shù)組
}
},
watch: { // 監(jiān)視雙向綁定的數(shù)據(jù)數(shù)組
checkData: {
handler(){ // 數(shù)據(jù)數(shù)組有變化將觸發(fā)此函數(shù)
if(this.checkData.length == 3){
document.querySelector('#quan').checked = true;
}else {
document.querySelector('#quan').checked = false;
}
},
deep: true // 深度監(jiān)視
}
},
methods: {
checkAll(e){ // 點擊全選事件函數(shù)
var checkObj = document.querySelectorAll('.checkItem'); // 獲取所有checkbox項
if(e.target.checked){ // 判定全選checkbox的勾選狀態(tài)
for(var i=0;i<checkObj.length;i++){
if(!checkObj[i].checked){ // 將未勾選的checkbox選項push到綁定數(shù)組中
this.checkData.push(checkObj[i].value);
}
}
}else { // 如果是去掉全選則清空checkbox選項綁定數(shù)組
this.checkData = [];
}
}
}
});
</script>
利用vue的雙向數(shù)據(jù)綁定v-model命令,當勾選時渠脉,checkbox的value值會自動push到所綁定的數(shù)組checkData中去宇整,省去了不少對dom的操作。
如果是固定選項這樣是可以實現(xiàn)的芋膘,但是這種方法有一些弊端鳞青,雙向綁定數(shù)組數(shù)據(jù)是寫死的,不太靈活为朋,如果增加了checkbox選項盼玄,要更改wach里綁定數(shù)組的長度判斷。
有時候checkbox選項也是后臺動態(tài)獲取過來的潜腻,這樣也靈活一些埃儿。
例如后臺數(shù)據(jù)是這樣的:
ajaxData: [{
name: 'a',
value: 'apple'
},{
name: 'b',
value: 'banana'
},{
name: 'c',
value: 'orange'
}]
需要先動態(tài)渲染checkbox選項,在進行數(shù)據(jù)綁定融涣。
<div id="app">
<div class="checkbox">
<label for="quan">
<!-- 這里的 $event 是將當前對象傳入進去童番,具體詳情請參照vue官方文檔 -->
<input id="quan" type="checkbox" @click="checkAll($event)"> 全選
</label>
<label v-for="item in ajaxData">
<!-- v-model 雙向數(shù)據(jù)綁定命令 -->
<input class="checkItem" type="checkbox" :value="item.value" v-model="checkData"> {{item.name}}
</label>
</div>
</div>
<script>
new Vue({
el: '#app',
data(){
return {
ajaxData: [{ // 后臺請求過來的數(shù)據(jù)
name: '選項1',
value: 'apple'
},{
name: '選項2',
value: 'banana'
},{
name: '選項3',
value: 'orange'
}],
checkData: [] // 雙向數(shù)據(jù)綁定的數(shù)組
}
},
watch: {
checkData: { // 監(jiān)視雙向綁定的數(shù)組變化
handler(){
if(this.checkData.length == this.ajaxData.length){
document.querySelector('#quan').checked = true;
}else {
document.querySelector('#quan').checked = false;
}
},
deep: true
}
},
methods: {
checkAll(e){ // 點擊全選事件
if(e.target.checked){
this.ajaxData.forEach((el,i)=>{
// 數(shù)組里沒有這一個value才push,防止重復push
if(this.checkData.indexOf(el.value) == '-1'){
this.checkData.push(el.value);
}
});
}else { // 全不選選則清空綁定的數(shù)組
this.checkData = [];
}
}
}
});
</script>
方法并不是最優(yōu)的寫法威鹿,也存在一些弊端剃斧,歡迎各位指點迷津,一起探討忽你。
公眾號:前端很忙
做一個喜歡分享的前端開發(fā)者幼东!
獲取更多干貨分享,歡迎來搞!