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