可以利用我们所学的vue基本用法来实现表单的添加及增删改查,效果如下:

需要引入vue.js,代码如下:

 <script src="./node_modules/vue/dist/vue.min.js"></script>

 html代码如下:

建立简单地表格与表单方便我们的添加,并将vue中的对象内容添加至表格

 <div id="app">
        <p>
            输入名字：
            <input type="text" v-model="that">
            <button @click="search">查询</button>
        </p>
        <fieldset>
            <legend>添加用户</legend>
            <p>
                序号：
                <!-- v-model 是一个获取value的语法糖 来取代@input="userFn"-->
                <input type="text" v-model="id1">
            </p>
            <p>
                姓名：
                <!-- v-model 是一个获取value的语法糖 来取代@input="userFn"-->
                <input type="text" v-model="name1">
            </p>
            <p>
                年龄：
                <input type="text" v-model="age1">
            </p>
            <button @click="add()">添加</button>
        </fieldset>
        <fieldset v-show="isShow">
            <legend>修改用户</legend>
            <p>
                序号：
                <!-- v-model 是一个获取value的语法糖 来取代@input="userFn"-->
                <input type="text" v-model="upId">
            </p>
            <p>
                姓名：
                <!-- v-model 是一个获取value的语法糖 来取代@input="userFn"-->
                <input v-model="upname" type="text">
            </p>
            <p>
                年龄：
                <input v-model="upage" type="text">
            </p>
            <button @click="upFn">确认修改</button>
        </fieldset>

        <table border="1" cellpadding="5">
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
            <!-- 循环的时候需要动态绑定一个key 动态绑定需要使用v-bind 
            v-bind 可以简写为:-->
            <tr v-for="(item,i) in search(that)" v-bind:key="item.id">
                <td v-model="list.id">{{item.id}}</td>
                <td v-model="list.name">{{item.name}}</td>
                <td v-model="list.age">{{item.age}}</td>
                <td>
                    <button @click="chenge(i)">修改</button>
                    <button @click="del(item.id)">删除</button>
                </td>
            </tr>
        </table>
    </div>

 我们将vue的解构代码黏贴如下,有了data的内容我们就可以将内容添加至表格了,如下:

new Vue({
            /* 挂载到id为app元素身上 */
            el: "#app",
            /* 定义数据 */
            /* 数据驱动视图 */
            data: {
                name1: "",
                age1: "",
                id1: "",
                that: "",
                upId: "",
                upname: "",
                upage: "",
                num: null,
                isShow: false,
                list: [{
                    id: 1,
                    name: "zhangsan",
                    age: 30,
                }, {
                    id: 2,
                    name: "lisi",
                    age: 40,
                }, {
                    id: 3,
                    name: "wangwu",
                    age: 50,
                }]
            },
})

 接下来就是定义我们的方法,并加以绑定监听事件:

查询功能:

 methods: {
                // 查询
                search(that) {
                    console.log(this.that);
                    return this.list.filter(item => {
                        if (item.name.includes(that)) {
                            return item;
                        }
                        console.log(that);
                    })
                }
            },
        })

增加功能:

 methods: {
                // 增加
                add() {
                    var car = { id: this.id1, name: this.name1, age: this.age1 }
                    this.list.push(car)
                    this.id1 = this.name1 = this.age1 = ""
                },
              )

修改功能:

注意点是我们要求点击修改的时候,要求回显,所以修改我们要两种方法,第一回显,第二修改,代码如下:

 methods: {
                
                // 回显
                chenge(i) {
                    this.isShow = !this.isShow;
                    let arr = this.list.find((item, index) => index == i)
                    this.upId = arr.id;
                    this.upname = arr.name;
                    this.upage = arr.age;
                    this.num = i;

                },
                // 修改
                upFn() {
                    this.list.splice(this.num, 1, {
                        id: this.upId,
                        name: this.upname,
                        age: this.upage,
                    })
                },
                }
      

删除功能:

 methods: {
                // 删除
                del(id) {
                    this.list.some((item, i) => {
                        if (item.id == id) {
                            this.list.splice(i, 1)
                            return true;
                        }
                    })
                },