vue 實現全選全不選
全選功能可以說是前端開發中非常常見的一個功能,以前的專案開發用jQuery開發比較多。最近在使用vue前端框架重構之前的專案。從jQuery到vue的轉變主要是一個思想想的轉變,是將原有的直接操作dom的思想轉變到操作資料,用資料驅動dom,也是vue框架的一個核心思想,思想轉變過來,對功能的實現自然容易理解一些。
例如下面這個簡單的demo
按照jQuery的思想來做的話,要選中全選checkbox和所有的checkbox項,分別註冊選中事件,判斷選中狀態來給相關的checkbox設定對應的狀態,這就涉及到很多的dom操作。
下面就看一下vue資料驅動dom的思想來實現這一功能。
vue資料驅動dom實現功能
<div class="checkbox">
<label for="quan">
<!-- 這裡的 $event 是將當前物件傳入進去,具體詳情請參照vue官方文件 -->
<input id="quan" type="checkbox" @click="checkAll($event)"> 全選
</label>
<label>
<!-- v-model 雙向資料繫結命令 -->
<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資料陣列
}
},
watch: { // 監視雙向繫結的資料陣列
checkData: {
handler(){ // 資料陣列有變化將觸發此函式
if(this.checkData.length == 3){
document.querySelector('#quan').checked = true;
}else {
document.querySelector('#quan').checked = false;
}
},
deep: true // 深度監視
}
},
methods: {
checkAll(e){ // 點選全選事件函式
var checkObj = document.querySelectorAll('.checkItem'); // 獲取所有checkbox項
if(e.target.checked){ // 判定全選checkbox的勾選狀態
for(var i=0;i<checkObj.length;i++){
if(!checkObj[i].checked){ // 將未勾選的checkbox選項push到繫結陣列中
this.checkData.push(checkObj[i].value);
}
}
}else { // 如果是去掉全選則清空checkbox選項繫結陣列
this.checkData = [];
}
}
}
});
</script>
利用vue的雙向資料繫結v-model命令,當勾選時,checkbox的value值會自動push到所繫結的陣列checkData中去,省去了不少對dom的操作。
如果是固定選項這樣是可以實現的,但是這種方法有一些弊端,雙向繫結陣列資料是寫死的,不太靈活,如果增加了checkbox選項,要更改wach裡繫結陣列的長度判斷。
有時候checkbox選項也是後臺動態獲取過來的,這樣也靈活一些
例如後臺資料是這樣的:
ajaxData: [{
name: 'a',
value: 'apple'
},{
name: 'b',
value: 'banana'
},{
name: 'c',
value: 'orange'
}]
需要先動態渲染checkbox選項,在進行資料繫結
<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 雙向資料繫結命令 -->
<input class="checkItem" type="checkbox" :value="item.value" v-model="checkData"> {{item.name}}
</label>
</div>
</div>
<script>
new Vue({
el: '#app',
data(){
return {
ajaxData: [{ // 後臺請求過來的資料
name: '選項1',
value: 'apple'
},{
name: '選項2',
value: 'banana'
},{
name: '選項3',
value: 'orange'
}],
checkData: [] // 雙向資料繫結的陣列
}
},
watch: {
checkData: { // 監視雙向繫結的陣列變化
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)=>{
// 數組裡沒有這一個value才push,防止重複push
if(this.checkData.indexOf(el.value) == '-1'){
this.checkData.push(el.value);
}
});
}else { // 全不選選則清空繫結的陣列
this.checkData = [];
}
}
}
});
</script>
方法並不是最優的寫法,也存在一些弊端,歡迎各位指點迷津,一起探討
這是我的github地址,有一些我自己寫的一些關於require、angular、vue等等的小專案,最近在學習Nodejs,非常歡迎大牛們來指點,交流,分享。
微信搜尋公眾號:前端很忙
獲取更多幹活分享,歡迎來搞!
相關推薦
js實現復選框全選和不選
onclick check checkbox rip () nbsp title false style <html> <head> <title></title> </head> <style>
JavaScript實現全選,反選,不選--小記
學習前端的時候記下小知識點。 如下】、 <script> //靜態頁面載入完成後再載入。js window.onload=function () { var btn1=document.getElement
全選和不選的實現
<style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0;
vue實現下拉列表多選全選以及模糊查詢的vue元件
前端,有時有這樣的需求,需要一個下拉列表,還要有多選全選功能,以及模糊查詢功能的vue元件,我做了一個簡陋的元件,供大家參考,有問題請留言 這是我的檔案目錄結構 ** 效果圖: o(∩_∩)o o(∩_∩)o o(∩_∩)o o(∩_∩)o o(∩_
vue基礎之全選,不選
先上效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" con
VUE 實現checkbox的全選/反選
1、頁面結構部分 <template> <div> <!--給全選按鈕繫結v-mode變數,值為true時就是選中狀態,繫結點選事件,執行全選和反選操作--> <input
JS實現全選、不選和反選效果
利用javascript實現全選、不選和反選效果 這個啥也不用多說,直接來程式碼,程式碼中自有註釋幫你理解 <!DOCTYPE html> <html> <head> <meta char
JavaScript表格的全選和不選
全選和全不選步驟分析: 1.確定事件: onclick 單機事件 &n
JQuery表格全選和不選
01JQuery表格全選和不選.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>01表格全選和不選</title> <sc
jquery複選框全選,反選和不選
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" sr
實現陣列元素選與不選問題-python實現
問題描述: 對於固定陣列{0,1,2,3,4,5,6,7,8,9} 輸入bool陣列{0,1,1,1,1,1,1,1,0,0},其中0對應的下標陣列元素可出現也可以不出現,1必須出現 出現 所有的可能的組合(組合問題標準的解法是回溯),轉化為字串,並按照字串升序排序!
窮舉搜尋:選擇物品的排列組合,每個物品都——可選、不選
注意:僅針對物品個數n很小試用,共有2^n種組合 另外還可以通過移位操作和位運算得到(目前我還不會,學會了再說) #include "pch.h" #include <iostream> int n = 3; int S[3] = { 0 }; void rec(int i)
vue實現前進重新整理後退不重新整理效果
最近在用vue嘗試著做移動端的專案。希望實現前進重新整理、後退不重新整理的效果。即載入過的介面能快取起來(返回不用重新載入),關閉的介面能被銷燬掉(再進入時重新載入)。例如對a->b->c 前進(b,c)重新整理,c->b->a 後退(b,a)不重新整理。 由於 keep
Vue中的checkbox全選全不選的實現
全選功能可以說是前端開發中非常常見的一個功能,以前的專案開發用jQuery開發比較多。最近在使用vue前端框架重構之前的專案。從jQuery到vue的轉變主要是一個思想想的轉變,是將原有的直接操作dom的思想轉變到操作資料,用資料驅動dom,也是vue框架的一個核心思想,
vue實現全選全不選
全選功能可以說是前端開發中非常常見的一個功能,以前的專案開發用jQuery開發比較多。最近在使用vue前端框架重構之前的專案。從jQuery到vue的轉變主要是一個思想想的轉變,是將原有的直接操作dom的思想轉變到操作資料,用資料驅動dom,也是vue框架的一個核心思想,思想轉變過來,對
vue實現單選多選反選全選全不選
單選 當我們用v-for渲染一組資料的時候,我們可以帶上index以便區分他們我們這裡利用這個index來簡單地實現單選 <li v-for="(item,index) in radioList" :key="index" :class="selectedNum==index?'activ
vue三種方式實現:全選、反選、全不選
方法一:v-model 與 [{checked:true},…] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi
用Vue.js實現全選與全不選刪除功能
這是實現全選與全不選邏輯的程式碼,大家只要給相應的控制元件再加上刪除邏輯就完成了全選與選不選、單選等刪除功能了;這段程式碼經過我很多次強暴,是可以用的。 <template> <div id="hello"> <ol>
vue 實現全選全不選
全選功能可以說是前端開發中非常常見的一個功能,以前的專案開發用jQuery開發比較多。最近在使用vue前端框架重構之前的專案。從jQuery到vue的轉變主要是一個思想想的轉變,是將原有的直接操作dom的思想轉變到操作資料,用資料驅動dom,也是vue框架的一個
用Vue實現一個全選指令
lld http 做了 hbm n) 功能 sin fur sbc 最近用vue做了兩個項目,都需要實現全選反選的功能,兩個項目用了兩種實現方法,第一個項目用vue的computed,第二個項目用指令來實現,用起來,發覺指令更加方便。 第一次做全選的時候是剛開始接觸vue不