vue實現簡單全選和反選功能
阿新 • • 發佈:2020-09-17
本文例項為大家分享了vue實現簡單全選和反選的具體程式碼,供大家參考,具體內容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Document</title> <style> table { width: 700px; text-align: center; } tr,th { height: 40px; } </style> <script src="../vue.js"></script> </head> <body> <div class="box"> <table cellspacing='0' border="solid 1px"> <thead> <tr> <th>全選<input type="checkbox" v-model='isAllChecked'></th> <th>id</th> <th>商品名稱</th> <th>商品價格</th> <th>商品數量</th> </tr> </thead> <tbody> <tr v-for='item in goods'> <td><input type="checkbox" v-model='item.isCheck'></td> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.price}}</td> <td>{{item.num}}</td> </tr> </tbody> </table> </div> <script> var vm = new Vue({ el: '.box',methods: { },data: { goods: [ { id: 20200905,name: '蘋果',price: 3,num: 12,isCheck: false,},{ id: 20200905,name: '香蕉',price: 2,num: 33,name: '橘子',price: 4,num: 44,] },computed: { isAllChecked: { /* this.goods.every(el=>el.isCheck)返回結果為true 或者false 遍歷下方每一個isCheck的狀態、 1、 都選中返回true---------即全選為true,2、 有一個沒選中返回false---即全選為false */ get() { return this.goods.every(el => el.isCheck) },set(val) { // 全選的狀態true、false兩種狀態 console.log(val); // val為true即全選的時候、下方每一個isCheck也是true // val為false即全選的時候、下方每一個isCheck也是false return this.goods.forEach(el => el.isCheck = val); } } } }) </script> </body> </html>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。