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請求渲染頁面作鋪墊