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 ...
随机推荐
- Lodop打印控件在页面如何使用
Lodop打印控件部署到web服务器简单,在页面的使用方法也简单,是非常容易和方便使用的打印控件.客户端本地打印角色(即用户访问网站后 用自己链接的打印机进行客户端本地打印),步骤很少,部署简单:Lo ...
- react学习目录
前面的话 React是如今热门的两大前端框架之一,它设计思路独特,性能卓越,逻辑简单,受到了大量开发者的喜爱.Vue的基本思路是基于HTML模板的扩展,而React的基本思路是基于JS语言的扩展.由于 ...
- mysql-python安装时EnvironmentError: mysql_config not found
mysql-python安装时EnvironmentError: mysql_config not found 在安装 mysql-python时,会出现: 复制代码 sh: mysql_config ...
- vue学习笔记（四）- cmd无法识别vue命令解决方法
解决控制台无法识别vue命令问题 作者:狐狸家的鱼 本文链接:cmd无法识别vue命令解决方法 GitHub:sueRimn 在控制台输入vue会报以下错误: vue : 无法将“vue”项识别为 c ...
- 【洛谷P3389 【模板】高斯消元法】
这是个版子题,当然本蒟蒻也是看了好几天才明白 对于这样的线性方程组,我们可以看成是一个矩阵 对于百度百科给的定义(我感到很迷)赶脚和行列式有的一拼 但我们要注意的是: 行列式是一个确切的值(有关行列式 ...
- SQL学习指南之查询入门
查询语句 select语句由几个组件或者说子句构成.不过在MySQL中,只有一种子句是必不可少的(select子句),通常的查询语句会至少包含6个子句中的2~3个.下面的表列出了用于不同目的的各个子句 ...
- Python Pandas 简单使用之 API熟悉
1.read_csv li_index = ['round_id', 'index', 'c-sequen' ] dataset = pd.read_csv(file, low_memory=Fals ...
- java集合框架综述
一.集合框架图 简化图: 说明:对于以上的框架图有如下几点说明 1.所有集合类都位于java.util包下.Java的集合类主要由两个接口派生而出:Collection和Map,Collection和 ...
- Redis protocol (redis通信协议)
以前只会用redis -cli客户端, 或者在java程序里使用jedis来作为介质与redis服务器通信.这两天正好在实习中接触了一点这方面的内容. 五一放假就稍微翻了翻redis相关资料. 本篇博 ...
- ArcGIS Server 10.0 安装及使用完整攻略
引言 ArcGIS Server 10.0在使用和安装的过程中,需要进行比较全面的学习,才能正确使用.缺乏正确的指引,用户很容易在安装及使用中遇到问题.所以笔者在此总结Server 10.0的安装及使 ...