全选 vue

来源：互联网发布：有组织犯罪知乎编辑：程序博客网时间：2024/05/18 00:54

JSFillder https://jsfiddle.net/
原文地址https://jsfiddle.net/addbwdau/

<div class="app">    <table class="table">        <thead>        <tr>            <th>#</th>            <th>Name</th>            <th>Age</th>        </tr>        </thead>        <tbody>        <tr>            <td><input type="checkbox" v-model="allChecked"/>全选{{allChecked}}</td>        </tr>        <tr v-for="item in list">            <td><input type="checkbox" v-model="item.checked" /></td>            <td>{{item.name}}</td>            <td>{{item.age}}</td>        </tr>        </tbody>    </table></div>

    var _list = [{name:"小明",age:23, checked: false},{name:"小红",age:20, checked: true},{name:"ddd",age:30, checked: true}];    new Vue({        el: '.app',        computed: {            allChecked: {                get: function(){                    return this.checkedCount == this.list.length;                },                set: function(value){                    this.list.forEach(function(item){                        item.checked = value                    })                    return value;                }            },            checkedCount: {                get: function(){                    var i = 0;                    this.list.forEach(function(item){                        if(item.checked == true) i++;                    })                    return i;                }            }        },        data:{            list: _list        }    });

0 0