vue實(shí)現(xiàn)簡(jiǎn)單全選和反選功能
本文實(shí)例為大家分享了vue實(shí)現(xiàn)簡(jiǎn)單全選和反選的具體代碼，供大家參考，具體內(nèi)容如下
<!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='http://www.gepszalag.com/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>商品價(jià)格</th> <th>商品數(shù)量</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, isCheck: false, }, { id: 20200905, name: ’橘子’, price: 4, num: 44, isCheck: false, },] }, computed: {isAllChecked: { /* this.goods.every(el=>el.isCheck)返回結(jié)果為true 或者false 遍歷下方每一個(gè)isCheck的狀態(tài)、 1、 都選中返回true---------即全選為true, 2、 有一個(gè)沒選中返回false---即全選為false */ get() { return this.goods.every(el => el.isCheck) }, set(val) { // 全選的狀態(tài)true、false兩種狀態(tài) console.log(val); // val為true即全選的時(shí)候、下方每一個(gè)isCheck也是true // val為false即全選的時(shí)候、下方每一個(gè)isCheck也是false return this.goods.forEach(el => el.isCheck = val); }} } }) </script></body></html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. asp(vbs)Rs.Open和Conn.Execute的詳解和區(qū)別及&H0001的說明2. PHP設(shè)計(jì)模式中工廠模式深入詳解3. CSS hack用法案例詳解4. ThinkPHP5實(shí)現(xiàn)JWT Token認(rèn)證的過程(親測(cè)可用)5. 用css截取字符的幾種方法詳解（css排版隱藏溢出文本）6. asp中response.write("中文")或者js中文亂碼問題7. JSP數(shù)據(jù)交互實(shí)現(xiàn)過程解析8. PHP session反序列化漏洞超詳細(xì)講解9. ASP 信息提示函數(shù)并作返回或者轉(zhuǎn)向10. ASP+ajax實(shí)現(xiàn)頂一下、踩一下同支持與反對(duì)的實(shí)現(xiàn)代碼
網(wǎng)公網(wǎng)安備