且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

vue.js - vuejs checkbox用v-model绑定一个bool变量,在js中可以控制这个bool变量来控制checkbox的状态吗

更新时间:2022-10-21 13:48:54

给你一个全选的例子

    <div id="app">
        <ol>
            <li>
                <span><input type="checkbox" v-model="selectAll"></th></span>
                <span align="left">全选</span>
            </li>
            <li v-for="answer in answers">
                <span>
                    <input type="checkbox" v-model="selected" :value="answer.id" >
                </span>
                <span>{{ answer.name }}</span>
            </li>
        </ol>
    </div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                answers: [ 
                    { "id": 1, "name": "A" },
                    { "id": 2, "name": "B" }, 
                    { "id": 3, "name": "C" }, 
                    { "id": 4, "name": "D" }
                ],
                selected: []
            },
            computed: {
                selectAll: {
                    get: function () {
                        return this.answers ? this.selected.length == this.answers.length : false;
                    },
                    set: function (value) {
                        var selected = [];

                        if (value) {
                            this.answers.forEach(function (user) {
                                selected.push(user.id);
                            });
                        }

                        this.selected = selected;
                    }
                }
            }
        });
    </script>

效果图,你实现的checkedId没显示出来而已,根据实际情况修改一下即可