# 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 万，月月到账

常用