vue.js实现checkbox全选

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="vue.js">script>
    <script>
        window.onload = function () {
            var c = new Vue({
                el:'.box',
                data:{
                    selectArr: [],
                    proData:[{
                        "name": "111"
                    }, {
                        "name": "222"
                    }, {
                        "name": "333"
                    }, {
                        "name": "444"
                    }]
                },
                methods:{
                    selectAll:function (event) {
                        var _this = this;
                        console.log(event.currentTarget)
                        if (!event.currentTarget.checked) {
                            this.selectArr = [];
                        } else { //实现全选
                            _this.selectArr = [];
                            _this.proData.forEach(function(item, i) {
                                _this.selectArr.push(item.name);
                            });
                        }
                    }
                }
            })
        }

    script>
head>
<body>
    <div class="box">
        <div class="hello">
            <ul>
                <li v-for="(index, item) in proData">
                    <label :for="index">
                        <input :id="index" type="checkbox" :value="item.name" v-model="selectArr">
                    label>{{item.name}}
                li>            ul>
            <button type="">删除button>{{selectArr}}
            <label>
                <input type="checkbox" class="checkbox" @click="selectAll" />全选
            label>
        div>
    div>
body>
html>

你可能感兴趣的:(移动开发)