<!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