全选 vue

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
        }
    });

src="//fiddle.jshell.net/addbwdau/show/">