vue 實現(xiàn)全選全不選

全選功能可以說是前端開發(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ā)者幼东!

獲取更多干貨分享,歡迎來搞!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末根蟹,一起剝皮案震驚了整個濱河市脓杉,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌简逮,老刑警劉巖球散,帶你破解...
    沈念sama閱讀 206,311評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異散庶,居然都是意外死亡蕉堰,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2 382
  • 文/潘曉璐 我一進店門悲龟,熙熙樓的掌柜王于貴愁眉苦臉地迎上來屋讶,“玉大人,你說我怎么就攤上這事须教∶笊” “怎么了?”我有些...
    開封第一講書人閱讀 152,671評論 0 342
  • 文/不壞的土叔 我叫張陵没卸,是天一觀的道長。 經常有香客問我秒旋,道長约计,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,252評論 1 279
  • 正文 為了忘掉前任迁筛,我火速辦了婚禮煤蚌,結果婚禮上,老公的妹妹穿的比我還像新娘细卧。我一直安慰自己尉桩,他們只是感情好,可當我...
    茶點故事閱讀 64,253評論 5 371
  • 文/花漫 我一把揭開白布贪庙。 她就那樣靜靜地躺著蜘犁,像睡著了一般。 火紅的嫁衣襯著肌膚如雪止邮。 梳的紋絲不亂的頭發(fā)上这橙,一...
    開封第一講書人閱讀 49,031評論 1 285
  • 那天,我揣著相機與錄音导披,去河邊找鬼屈扎。 笑死,一個胖子當著我的面吹牛撩匕,可吹牛的內容都是我干的鹰晨。 我是一名探鬼主播,決...
    沈念sama閱讀 38,340評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼模蜡!你這毒婦竟也來了漠趁?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 36,973評論 0 259
  • 序言:老撾萬榮一對情侶失蹤哩牍,失蹤者是張志新(化名)和其女友劉穎棚潦,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體膝昆,經...
    沈念sama閱讀 43,466評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡丸边,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 35,937評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了荚孵。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片妹窖。...
    茶點故事閱讀 38,039評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖收叶,靈堂內的尸體忽然破棺而出骄呼,到底是詐尸還是另有隱情,我是刑警寧澤判没,帶...
    沈念sama閱讀 33,701評論 4 323
  • 正文 年R本政府宣布蜓萄,位于F島的核電站,受9級特大地震影響澄峰,放射性物質發(fā)生泄漏嫉沽。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,254評論 3 307
  • 文/蒙蒙 一俏竞、第九天 我趴在偏房一處隱蔽的房頂上張望绸硕。 院中可真熱鬧,春花似錦魂毁、人聲如沸玻佩。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽咬崔。三九已至,卻和暖如春烦秩,著一層夾襖步出監(jiān)牢的瞬間刁赦,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工闻镶, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留甚脉,地道東北人。 一個月前我還...
    沈念sama閱讀 45,497評論 2 354
  • 正文 我出身青樓铆农,卻偏偏與公主長得像牺氨,于是被迫代替她去往敵國和親狡耻。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,786評論 2 345

推薦閱讀更多精彩內容

  • 最近在逛各大網(wǎng)站猴凹,論壇夷狰,以及像SegmentFault等編程問答社區(qū),發(fā)現(xiàn)Vue.js異辰荐火爆沼头,重復性的提問和內容...
    忘川慕白閱讀 5,910評論 7 113
  • Vue 實例 屬性和方法 每個 Vue 實例都會代理其 data 對象里所有的屬性:var data = { a:...
    云之外閱讀 2,202評論 0 6
  • 1.安裝 可以簡單地在頁面引入Vue.js作為獨立版本缤苫,Vue即被注冊為全局變量葫慎,可以在頁面使用了。 如果希望搭建...
    Awey閱讀 10,995評論 4 129
  • 最近新裝的centos ssh登錄后螟左,純黑白的看起來有點難受购对,打算改個配色猾昆,網(wǎng)上找了些資料。記錄一下 mkdir ...
    lilith買買買閱讀 3,450評論 0 0
  • 以前只在別人的故事里聽到過,說有時候睡覺做夢會哭著醒來解幽,而今天自己卻真的經歷了一次贴见。 8月的清晨,陽光懶懶地跑進大...
    BU3001閱讀 347評論 3 4