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 ...
随机推荐
- codeforces444A
DZY Loves Physics CodeForces - 444A DZY loves Physics, and he enjoys calculating density. Almost eve ...
- 用UE4蓝图制作FPS_零基础学虚幻4第二季
课时1:案例演示 05:12 课时2:工程准备 07:35 (把一个项目从一个工程移动到另一个工程) 1.新建一个空白工程,不包含初学者内容 2.选择我们要复制的工程,按右键,如下图: 复制到新工程的 ...
- magento2 - Invalid credentials for 'https://repo.magento.com/packages.json', aborting.
错误如下: 登陆:https://developer.magento.com/找到路径-创建公钥与私钥: Developer Portal -> My Access Keys -> Cre ...
- Magento Meigee-Glam 主题的用法
Start起点 Package Structure包装结构 License许可证 Installation安装 What's new Updated!更新了什么! Theme options主题选项 ...
- 使用AForge.NET Framework打开摄像头并截图 C#
videoDevices = new FilterInfoCollection(FilterCategory.VideoInputDevice); if (videoDevices.Count == ...
- 集合的遍历以及在Spring中的注入
(一)遍历 list:foreach循环 set:foreach循环 map:先用set集合得到所有key值,然后循环key得到所有vale Map<String,String> map ...
- kubernetes云平台管理实战： 故障自愈实战（四）
一.创建实验文件 [root@k8s-master ~]# cat myweb-rc.yml apiVersion: v1 kind: ReplicationController metadata: ...
- React 记录(4)
React文档:https://www.reactjscn.com/docs/components-and-props.html 慢慢学习:对照教程文档,逐句猜解,截图 React官网:https:/ ...
- 6核 CPU导致SQL2005安装时出“无法启动服务”错
周一新买的IBM3650M3的服务器上安装SQL server2005 安装到一半时,报"提示:SQL Server 服务无法启动."错. 换了几个操作系统版本和换了几个版本的sq ...
- 在Spring框架中bean配置文件中constructor-arg标签中没有name元素?
bean配置文件出现错误的依赖: <beans <beans xmlns="http://www.springframework.org/schema/beans" ...