本篇文章主要介紹了vue 實作全選全不選的範例程式碼,現在分享給大家,也給大家做個參考。一起來看看吧
全選功能可以說是前端開發中非常常見的一個功能,以前的專案開發用jQuery開發比較多。最近在使用vue前端框架重構之前的項目。從jQuery到vue的轉變主要是一個思想想的轉變,是將原有的直接操作dom的思想轉變到操作數據,用數據驅動dom,也是vue框架的一個核心思想,思想轉變過來,對功能的實現自然容易理解一些。
例如下面這個簡單的demo
#按照jQuery的想法來做的話,要選取全選checkbox和所有的checkbox項,分別註冊選取事件,判斷選取狀態來為相關的checkbox設定對應的狀態,這就牽涉到很多的dom操作。
下面就來看看vue資料驅動dom的想法來實現這個功能。
vue資料驅動程式dom實作功能
利用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選項,在進行資料綁定。
github位址:https://github.com/zhangqian00/
#相關建議:Vue 實作一個酷炫的menu外掛程式詳解
########################################################### ##以上是vue 實作全選全不選的範例程式碼_vue.js的詳細內容。更多資訊請關注PHP中文網其他相關文章!