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 ...
随机推荐
- SQL 中使用 WITH AS 提高性能
一．WITH AS的含义WITH AS短语,也叫做子查询部分(subquery factoring),可以让你做很多事情,定义一个SQL片断,该SQL片断会被整个SQL语句所用到.有的时候,是为了让S ...
- 读取Excel2003、Excel2007或更高级的兼容性问题 workbook 下载中文名称文件
xls 使用HSSFWorkbook xlsx使用XSSFWorkbook 但是我使用XSSFWorkbook时没找到nuget包,引用不了,只能重新找办法,幸好workbook解决了我这个问题 // ...
- kubernetes-kubeadm自动生成的证书过期的解决方法
拉取kubernetes的源码: git clone https://github.com/kubernetes/kubernetes.git 切换版本: cd kubernetes &&am ...
- MySQL索引管理
一.索引介绍 1.什么是索引 1.索引好比一本书的目录,它能让你更快的找到自己想要的内容. 2.让获取的数据更有目的性,从而提高数据库索引数据的性能. 2.索引类型介绍 1.BTREE:B+树索引 2 ...
- 使用@property
@property装饰器就是负责把一个方法变成属性调用的,既能检查参数,又可以用类似属性这样简单的方式来访问类的变量 class Student(object): @property def scor ...
- JDK源码分析（7）String
String String表示字符串,Java中所有字符串的字面值都是String类的实例,例如"ABC".字符串是常量,在定义后不能被改变,字符串缓冲区支持可变的字符串.因为St ...
- 【GDOI2016模拟3.16】幂（容斥 + 模型复杂转化）
[GDOI2016模拟3.16]幂 \(X\in[1,A],Y\in[1,B]\),问:\(x^y\)的不用取值个数. \(A,B\)都是\(10^9\)级别. 然后我们开搞. 首先,假设一个合法的\ ...
- CMDB资产管理系统开发【day25】:表结构设计1
资产表 # _*_coding:utf-8_*_ __author__ = 'jieli' from assets.myauth import UserProfile from django.db i ...
- C# this扩展方法
本文导读:扩展方法被定义为静态方法,但它们是通过实例方法语法进行调用的. 它们的第一个参数指定该方法作用于哪个类型,并且该参数以 this 修饰符为前缀. 扩展方法当然不能破坏面向对象封装的概念,所以 ...
- 《Java》第四周学习总结
20175301 李锦然 一:本周学习内容 1:学习第五章视频 2:做实验 第五章主要讲的是子类与父类的关系,子类的继承与多态,final类super类等内容 仓库地址https://gitee.co ...