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 ...
随机推荐
- 拷贝文件到服务器 提示FTP文件夹错误
FTP文件夹错误将文件复制到FTP服务器时发生错误.请检查是否有权限将文件放到该服务器上.详细信息:200 Type set to I.227Entering Passive Mode (122,11 ...
- JS Array.reduce 对象属性累加
Array reduce() 方法 ,无非就是 计算数组元素 相加后的总和 ,看网上给的Demo 全是 [1,2,3,4,6].reduce 这种基本用法, 本次我将使用 reduce 实现 数组 ...
- 电脑重装系统后如何恢复 Mysql 数据库
电脑重装系统后如何恢复 Mysql 数据库 一.[设置mysql的path] 比如:我的mysql在:D:\DataBase\mysql-5.7.13-winx64,可以在环境变量中重新新建一个环境变 ...
- Day 4 测试（QwQ 表示没考好 未完待续。。。 可能要过一段时间才会更
#include<iostream> #include<algorithm> #include<cstdio> #include<cstring> #i ...
- 【并发编程】【JDK源码】CAS与synchronized
线程安全 众所周知,Java是多线程的.但是,Java对多线程的支持其实是一把双刃剑.一旦涉及到多个线程操作共享资源的情况时,处理不好就可能产生线程安全问题.线程安全性可能是非常复杂的,在没有充足的同 ...
- 【转】Esp8266学习之旅① 搭建开发环境，开始一个“hellow world”串口打印。
@2019-02-28 [小记] Esp8266学习之旅① 搭建开发环境,开始一个“hellow world”串口打印.
- django restframework jwt
既然要来学习jwt(json web token),那么我们肯定是先要了解jwt的优势以及应用场景--跨域认证. $ pip install djangorestframework-jwt 传统coo ...
- python之路day06--python2/3小区别，小数据池的概念，编码的进阶str转为bytes类型，编码和解码
python2#print() print'abc'#range() xrange()生成器#raw_input() python3# print('abc')# range()# input() = ...
- Zabbix通过JMX方式监控java中间件
Zabbix2.0添加了支持用于监控JMX应用程序的服务进程,称为“Zabbix-Java-gateway”:它是用java写的一个程序. 工作原理: zabbix_server想知道一台主机上的特定 ...
- 浅谈js中的this关键字
---恢复内容开始--- this是JavaScript中的关键字之一,在编写程序的时候经常会用到,正确的理解和使用关键字this尤为重要.接下来,笔者就从作用域的角度粗谈下自己对this关键字的理解 ...