Vue实现全选和反选

Vue实现搜索功能

思路

 //              全选和反选思路
//首先给全选按钮写一个点击事件，绑定一个变量默认为false，
//创建一个空的数组，在循环里面用v-model绑定,在用:value=id或者下标；
//在全选点击事件中，if判断当按钮为true时数组为空，反之循环数组循环，然后if判断数组当里面的每一项为-1时，给数组添加每一项
//监听数组，判断数组的长度等于list的长度的时候，checked为true反之checked为false

html

<div id="app">
        <input type="checkbox" @click="all" v-model="checked">
        <span>全选</span>
        <li v-for="(item,index) in list" :key="index">
            <input type="checkbox" v-model="model" :value="item.id">{{item.name}}
        </li>
    </div>				

js

    let vm = new Vue({
        el: "#app",
        data: {
            list: [
                { id: 1, name: 'js', age: 21, pircle: 200 },
                { id: 2, name: 'css', age: 21, pircle: 200 },
                { id: 3, name: 'html', age: 21, pircle: 200 },
                { id: 4, name: 'PHP', age: 21, pircle: 200 },
            ],
            checked: false,
            model: []
        },
        methods: {
            all() {
                if (this.checked) {
                    this.model = []
                } else {
                    this.list.forEach(i => {
                        if (this.model.indexOf(i.id) == -1) {
                            this.model.push(i.id)
                        }
                    })
                }
            }
        },
        watch: {
            model() {
                if (this.model.length == this.list.length) {
                    this.checked = true;
                } else {
                    this.checked = false
                }
            }
        }

望前端同志月薪3万，月月到账