vue 全選與取消全選


 

所用知識點

1 v-model:監聽input內容

2 watch:監聽屬性方法

參考https://cn.vuejs.org/v2/api/#watch

3 頁面初始化調用函數 mounted

一:html元素

實現思路

1 v-model 一個收集所有input(除全選框外)數組checkModel ,vue會動態將其checked為true的input的value值存入數組checkModel里

2 watch函數來監聽checkModel 屬性,當其長度==input元素時 全選按鈕選中 否則取消

3 全選按鈕v-model checkAll 屬性來顯示當前選中狀態 click事件里 當checkAll為true時 全選 所有input按鈕被選中也就是checkModel的遍歷存入其value值

 

完整代碼:

 

備注:這里getUserData()函數並沒有使用到只是為有序ajax請求渲染頁面做鋪墊

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM