Vue双向绑定及增删查全选反选操作

html:

    <div id="app">

        <div class="add">

            <input type="text" v-model="name" @keyup.enter="add()">

            <button @click="add()" @key>添加</button>

        </div>

        <ul>

            <li v-for="(item,index) in list" :key="item.id">

                <span>{{index + 1}}</span>

                <input type="checkbox" @click="selectItem(index)" :checked="item.select" />

                {{item.name}}

            </li>

        </ul>

        <button @click="selctAll()">{{selectText}}</button>

        <button @click="removeItem()">删除</button>

    </div>

js:

var data = new Vue({

            el: "#app",

            data: {

                name: "",

                list: [

                    { id: 1, name: "angular", select: false },

                    { id: 2, name: "react", select: false },

                    { id: 3, name: "vue", select: false }

                ],

                selectText: "全选"

            },

            methods: {

                add() {

                    if (!this.name) {

                        return alert('请输入元素')

                    }

                    this.list.push({

                        id: this.list.length + 1,

                        name: this.name,

                        select: false

                    });

                    this.name = '';

                    this.selectText = '全选'

                },

                selectItem(index) {

                    this.list[index].select = !this.list[index].select;

                    var result = !this.list.some(value => value.select !== true);

                    this.selectText = result ? '反选' : '全选';

                },

                selctAll() {

                    if (this.selectText == '反选') {

                        for (let item of this.list) {

                            item.select = false;

                        }

                        this.selectText = '全选';

                    } else {

                        for (let item of this.list) {

                            item.select = true;

                        }

                        this.selectText = '反选';

                    }

                },

                removeItem() {

                    var result = this.list.some(value => value.select !== false);

                    if (!result) {

                        return alert('请选中需要删除的数据');

                    }

                    for (let i = 0; i < this.list.length; i++) {

                        if (this.list[i].select) {

                            this.list.splice(i, 1);

                            i--;

                        }

                    }

                }

            }

        })

功能实现很多种，本人前端三年开发敬意觉得这种方式企业用的比较多，应用场景比较广