本文實例講述了vue基于兩個計算屬性實現選中和全選功能。分享給大家供大家參考，具體如下：
還是選中和全選功能，用兩個計算屬性來實現，別人的代碼，思維確實不一樣。學習了
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>www.survivalescaperooms.com vue選中和全選</title> <style> table, td, th{ border:1px solid #ebebeb; border-collapse:collapse; text-align: center; } table { width:500px; } </style> <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script></head><body> <div class="app"> <table> <thead> <tr> <th style="line-height: 38px">選中數 {{checkedCount}}<input type="checkbox" v-model="allchecked" style="zoom:200%;vertical-align: middle"> </th> <th>name</th> <th>age</th> </tr> </thead> <tbody> <tr v-for="item in list"> <td><input type="checkbox" v-model="item.checked" style="zoom:200%"></td> <td>{{item.name}}</td> <td>{{item.age}}</td> </tr> </tbody> </table> </div> <script> var list=[ { name:'小明', age: 23, checked: false }, { name:'小紅', age: 2, checked: true }, { name:'小藍', age: 23, checked: true }, { name:'小bai', age: 40, checked: true }, { name:'王小二', age: 18, checked: false } ] new Vue({ el: '.app', data: { list }, computed: { allchecked: { // getter get: function () { return this.list.length == this.checkedCount }, // setter set: function (val) { //val就是點擊之后，全選按鈕的v-model值（狀態）,勾上后就是val的值就是true。未勾上就是false console.log(val) this.list.forEach(item => { item.checked = val }) } }, checkedCount: { // getter get: function () { var i = 0 this.list.forEach(item => { if (item.checked === true) i++ }) return i } } } }) </script></body></html>使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.VeVB.COm/code/HtmlJsRun測試上述代碼，可得如下運行效果：
希望本文所述對大家vue.js程序設計有所幫助。
新聞熱點
疑難解答
