Vue 的 增 删 查 改

vue的增加

1.虚假的添加（不增加入数据库）

<section>
        <div class="form-group">
            <label>编号</label>
            <input type="text" v-model="role.ID" />
        </div>
        <div class="form-group">
            <label>名称</label>
            <input type="text" v-model="role.Name" />
        </div>
        <div class="form-group">
            <label>备注</label>
            <input type="text" v-model="role.Remark" />
        </div>
        <input type="button" value="保存" v-on:click="add()" />
    </section>

在button控件增加一个添加的方法： v-on:click=“add()”、

并且在section中添加一个add的添加方法
关键词 push

 var v = new Vue({
            el: "#app",
            data: {
                role: { "ID": 1, "Name": "name", "Remark": "remark" },
                items:
                    [
                        { "ID": 1, "Name": "刘", "Remark": "饭" },
                        { "ID": 2, "Name": "礼", "Remark": "饭" },
                        { "ID": 3, "Name": "焕", "Remark": "饭" }
                    ]
            },
            methods: {
                add: function () {
                    this.items.push(this.role);
                    this.role = { "ID":0, "Name": "", "Remark": "" };
                    //把添加的值给断了连接，不然再改会一起改动
                }
            }
       });

页面结果：

该新增刷新之后就没有了；

vue的删除

vue的删除（虚假的删除）

<tbody>
                <tr v-for="(item,index) in items">
                    <td>{{ item.ID }}</td>
                    <td>{{ item.Name }}</td>
                    <td>{{ item.Remark }}</td>
                    <td><button v-on:click="del(index)">删除</button></td>
                </tr>
            </tbody>

要在v-for中加个index属性 v-for="(item,index)
增加一个button控件 定义一个del删除方法并且在del中放入index
关键词：splice

 del(index) {
                    this.items.splice(index, 1);
                }