Vue 增删改查 demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../../Scripts/jquery-3.3.1.js"></script>
    <script src="../../Scripts/vue.js"></script>
</head>
<body>

    <div id="app">
        <form>
            名称：<input type="text" name="giftPack.name" v-model="giftPack.name" />
            是否开启：<input type="radio" name="giftPack.isEnabled" value="true" v-model="giftPack.isEnabled" />开启<input type="radio" name="giftPack.isEnabled" value="false" v-model="giftPack.isEnabled" />关闭
            
        </form>
        <div>
            <input type="button" value="新增"  v-on:click="add"/>
            <table>
                <thead>
                    <tr>
                        <th>奖励类型</th>
                        <th>奖励标识</th>
                        <th>数量</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <template v-for="giftItem in giftPack.giftPackItems">
                        <tr>
                            <td>{{giftItem.type}}</td>
                            <td>{{giftItem.desc}}</td>
                            <td>{{giftItem.quantity}}</td>
                            <td>
                                <a href="#" v-on:click="edit(giftItem)">编辑</a>
                                <a href="#" v-on:click="deleteGiftItem(giftItem)">删除</a>
                            </td>
                        </tr>
                    </template>
                </tbody>
               
               
            </table>


            <div v-show="isShow">
                <div>
                    奖励类型：<select v-model="giftPackItem.type">
                                <option value="">-请选择-</option>
                                <option>红包</option>
                                <option>免费提现次数</option>
                            </select>
                </div>
                <div>
                    奖励标识：<select v-model="giftPackItem.desc">
                        <option value="">-请选择-</option>
                        <option>增加</option>
                        <option>增加</option>
                    </select>
                </div>
                <div>
                    数量:<input type="text" v-model="giftPackItem.quantity" />
                </div>
                
                <div>
                    <input type="button" value="保存" v-on:click="save(giftPackItem)" />
                </div>
            </div>
        </div>
    </div>
    <script>
       



        var data = {
            isShow: false,
            giftPack: {
                name: "",
                isEnabled: true,
                giftPackItems: [
                    {
                        id:1,
                        type: "红包",
                        desc: "20元",
                        quantity:1
                    },
                    {
                        id:2,
                        type: "免费提现次数",
                        desc: "增加",
                        quantity: 1
                    }
                ]
            },
            giftPackItem: {
                id: 0,
                type:"",
                desc: "",
                quantity: 1
            },
            editGiftPackItem: {
                id: 0,
                type: "",
                desc: "",
                quantity: 1
            }

        }
        var vue = new Vue({
            el: "#app",
            data: data,
            methods: {
                add: function () {
                    this.isShow = true;
                },
                edit: function (me) {
                    this.isShow = true;

                    this.giftPackItem = this.initItemForUpdate(me);
                },
                // 弹出修改数据的对话框时，使用对象的深拷贝
                initItemForUpdate(p, c) {
                    c = c || {};
                    for (var i in p) {
                        // 属性i是否为p对象的自有属性
                        if (p.hasOwnProperty(i)) {
                            // 属性i是否为复杂类型
                            if (typeof p[i] === 'object') {
                                // 如果p[i]是数组，则创建一个新数组
                                // 如果p[i]是普通对象，则创建一个新对象
                                c[i] = Array.isArray(p[i]) ? [] : {};
                                // 递归拷贝复杂类型的属性
                                this.initItemForUpdate(p[i], c[i]);
                            } else {
                                // 属性是基础类型时，直接拷贝
                                c[i] = p[i];
                            }
                        }
                    }
                    return c;
                },
                save: function (me) {

                    if (me.id == 0) {
                        this.giftPackItem.id = this.giftPack.giftPackItems.length + 1;
                        this.giftPack.giftPackItems.push(this.giftPackItem);
                        this.giftPackItem = {
                            id: 0,
                            type: "",
                            desc: "",
                            quantity: 1
                        };
                    }
                    else {
                        
                        for (var i = 0; i < this.giftPack.giftPackItems.length; i++) {
                            if (this.giftPack.giftPackItems[i].id == me.id) {
                                this.giftPack.giftPackItems[i] = me;
                                break;
                            }
                        }


                        this.giftPackItem = {
                            id: 0,
                            type: "",
                            desc: "",
                            quantity: 1
                        };
                    }
                    
                    this.isShow = false;
                },
                deleteGiftItem: function (me) {
                    for (var i = 0; i < this.giftPack.giftPackItems.length; i++) {
                        if (this.giftPack.giftPackItems[i].id == me.id) {
                            this.giftPack.giftPackItems.splice(i, 1);
                            break;
                        }
                    }
                }
                
            }
        });




    </script>
</body>
</html>
参考地址：https://blog.csdn.net/liuyan55/article/details/79311819