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
Vue 增删改查 demo的更多相关文章
- 【讲义提纲】以一个实战新闻cms增删改查demo为例，给学院国创队伍培训php
PHP实战基础——以一个新闻cms的增删改查为例 一. 环境配置 二. 数据库创建 三. 增删改查demo 连接数据库 <?php $link=mysq ...
- mvc模式jsp+servel+dbutils oracle基本增删改查demo
mvc模式jsp+servel+dbutils oracle基本增删改查demo 下载地址
- mvc模式jsp+servel+jdbc oracle基本增删改查demo
mvc模式jsp+servel+jdbc oracle基本增删改查demo 下载地址
- SSH登录与增删改查demo详解+源代码
点击下载,测试绝对可用SSH整合框架登录加增删改查demo 下载地址:http://download.csdn.net/detail/qq_33599520/9784679 一.框架概述 spri ...
- ssm学习（四）--完整的增删改查demo
上一篇文章简要介绍了将sping mvc加入整个框架,算是完成了ssm的集成.本节继续前面的内容,结合spring mvc做一个简单的增删改查demo. 1.首先,重写一下GeckoList.jsp页 ...
- ztree--插件实现增删改查demo（完整版）
ztree--插件实现增删改查demo(完整版) var setting = { async: { enable: true, ...
- hibernate之增删改查demo
package dao; import java.util.ArrayList; import java.util.List; import org.hibernate.Query; import o ...
- asp.net数据库增删改查demo
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- vue 增删改查
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- CSS3文字、背景与列表
一.文本相关属性 1.字体 (1)字体设置 在HTML中,字体通过<font face="字体名称">来设置.在CSS中字体通过font-family属性来控制,里面可 ...
- 洛谷P3369 普通平衡树
刚学平衡树,分别用了Splay和fhq-treap交了一遍. 这是Splay的板子,貌似比较短? Splay #include <iostream> #include <cstdio ...
- 洛谷P1108 低价购买题解
看到"你必须用低于你上次购买它的价格购买它",有没有想到什么?没错,又是LIS,倒过来的LIS,所以我们只要把读入的序列倒过来就可以求LIS了,第一问解决. 首先要厘清的是,对于这 ...
- React 记录(4)
React文档:https://www.reactjscn.com/docs/components-and-props.html 慢慢学习:对照教程文档,逐句猜解,截图 React官网:https:/ ...
- Django 数据库查询集合(双下划线连表操作)
Django是一款优秀的web框架,有着自己的ORM数据库模型.在项目中一直使用django数据库,写一篇文章专门记录一下数据库操作.略写django工程创建过程,详写查询过程.可以和sqlalche ...
- 如何在IntelliJ IDEA中使用.ignore插件忽略不必要提交的文件
如何在IntelliJ IDEA中使用.ignore插件忽略不必要提交的文件 最近初学Git,而且在使用的IDE是IntelliJ IDEA,发现IDEA在提交项目到本地仓库的时候,会把.idea文件 ...
- SpringBoot（七）：SpringBoot整合Swagger2
原文地址:https://blog.csdn.net/saytime/article/details/74937664 手写Api文档的几个痛点: 文档需要更新的时候,需要再次发送一份给前端,也就是文 ...
- Collections of Zujin Zhang's Published works
I am not good, but I shall do my best to be better. Any questions, please feel free to contact zhang ...
- Love Me,Love My Dog
Love me, love my dog. 爱屋及乌. 出处<尚书大传•大战>:“爱人者,兼其屋上之乌.” 活学活用:love first love 初恋 unrequited [one- ...
- Java入门——多态
Java引用变量有两个类型分别是 编译时类型:声明的类型 运行时类型:实际赋值的类型 如果这两个类型不一样就会出现多态 举例现有类A class A{ public int field = 5; pu ...