這篇文章主要介紹了vue基於兩個計算屬性實現選中和全選功能,結合實例形式分析了vue計算屬性get及set操作頁面元素實現選中與全選功能相關操作技巧,需要的朋友可以參考下
本文實例講述了vue基於兩個計算屬性實現選中和全選功能。分享給大家供大家參考,具體如下:
還是選中和全選功能,用兩個計算屬性來實現,別人的代碼,思維確實不一樣。學習了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 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.jb51.net/code/HtmlJsRun測試上述代碼,可得如下運行效果:
希望本文所述對大家vue.js程序設計有所幫助。