Vue.js checkbox 练习

Posted 2020-10-06 lunawzh

<div id="app">
    <input type="checkbox" v-model="sex" value="1" />足球
    <input type="checkbox" v-model="sex" value="2" />篮球
    <input type="checkbox" v-model="sex" value="3" />乒乓球
    <br />
    {{sex}}
    <br />
    <button v-on:click="clickall(true)">全选</button>
    <button v-on:click="clickall(false)">取消全选</button>

</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            sex:[]
        }
        ,
        methods: {
            clickall: function (flag) {
                if (flag) {
                    _this = this;
                    this.sex = [];
                    $.each($(":checkbox"), function (i, v) {
                        _this.sex.push(v.value);
                    });
                } else {
                    this.sex = [];
                }
            }
        }
    });
</script>