VueJs初步学习，一个表格的增删改查
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VueJs学习测试</title>
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="./node_modules/element-ui/lib/theme-default/index.css" />
<style>
.mask {
position: absolute;
display: none;
top: 0px;
left: 0px;
margin: 0px;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="app" class="container" style="margin-top: 20px;">
<div class="row">
<form style="width: 320px;" onsubmit="return false;" @submit="form_submit()">
<div class="form-group">
<label>姓名</label>
<input type="text"
class="form-control"
v-model="current_user.name"
:disabled.prop="status == 'show' ? true : false"
required />
</div>
<div class="form-group">
<label>性别</label>
<select class="form-control"
v-model="current_user.sex"
:disabled.prop="status == 'show' ? true : false"
required>
<option></option>
<option value="1">男</option>
<option value="2">女</option>
</select>
</div>
<div class="form-group">
<label>年龄</label>
<input type="number"
class="form-control"
v-model="current_user.age"
:disabled.prop="status == 'show' ? true : false"
required />
</div>
<div class="form-group">
<label>地址</label>
<input type="text"
class="form-control"
v-model="current_user.address"
:disabled.prop="status == 'show' ? true : false" />
</div>
<div class="form-group text-right">
<input type="submit"
class="btn btn-success"
value="保存"
:disabled.prop="status == 'show' ? true : false" />
</div>
</form>
</div> <div class="row">
<table class="table table-bordered">
<thead>
<tr>
<th class="col-sm-2">姓名</th>
<th class="col-sm-2">性别</th>
<th class="col-sm-2">年龄</th>
<th class="com-sm-5">地址</th>
<th class="com-sm-1">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list">
<td>{{ item.name }}</td>
<td>{{ item.sex == 1 ? "男" : "女" }}</td>
<td>{{ item.age }}</td>
<td>{{ item.address }}</td>
<td>
<input type="button" class="btn btn-default btn-xs" value="查看" @click="set_show(item)" />
<input type="button" class="btn btn-default btn-xs" value="编辑" @click="set_edit(item)"/>
<input type="button" class="btn btn-default btn-xs" value="删除" @click="del_item(item)"/>
</td>
</tr>
</tbody>
</table>
</div> <div class="row">
<input type="button" class="btn btn-success btn-add" value="新增" @click="set_add()" >
</div>
</div>
<div class="mask"></div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/element-ui/lib/index.js"></script>
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script>
function jsObjCopy(obj) {
return JSON.parse(JSON.stringify(obj));
} function getGuid32() {
var rt_str = String.fromCharCode(65 + Math.floor(Math.random() * 26));
for (i = 0; i < 31; ++i) {
var num = Math.floor(Math.random() * (26 + 26 + 10));
var ch_str;
if (num < 10) {
ch_str = num.toString();
}
else if (num < 10 + 26) {
ch_str = String.fromCharCode(65 + num - 10);
}
else {
ch_str = String.fromCharCode(97 + num - 10 - 26);
}
rt_str += ch_str;
}
return rt_str;
} var myApp = new Vue({
el: "#app",
data: {
status: "add",
current_user: new Object(),
list: []
},
methods: {
set_add: function() {
this.status = "add";
this.current_user = new Object();
},
set_show: function(item) {
this.status = "show";
this.current_user = jsObjCopy(item);
},
set_edit: function(item) {
this.status = "edit";
this.current_user = jsObjCopy(item);
},
del_item: function(item) {
var list = this.list;
for (i = 0; i < list.length; ++i) {
if (list[i].guid == item.guid) {
list.splice(i, 1);
break;
}
}
},
form_submit: function() {
if (this.status == "add") {
this.current_user.guid = getGuid32();
this.list.push(jsObjCopy(this.current_user));
this.current_user = new Object();
}
else if (this.status == "edit") {
var list = this.list;
for (i = 0; i < list.length; ++i) {
if (list[i].guid == this.current_user.guid) {
list.splice(i, 1, jsObjCopy(this.current_user));
break;
}
}
}
return false;
}
}
});
</script>
</body>
</html>
VueJs初步学习，一个表格的增删改查的更多相关文章
- SQL server 创建 修改表格 及表格基本增删改查 及 高级查询 及 (数学、字符串、日期时间)函数[转]
SQL server 创建 修改表格 及表格基本增删改查 及 高级查询 及 (数学.字符串.日期时间)函数 --创建表格 create table aa ( UserName varchar(50 ...
- 用AngularJS实现对表格的增删改查（仅限前端）
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- EF学习笔记-1 EF增删改查
首次接触Entity FrameWork,就感觉非常棒.它节省了我们以前写SQL语句的过程,同时也让我们更加的理解面向对象的编程思想.最近学习了EF的增删改查的过程,下面给大家分享使用EF对增删改查时 ...
- 【原生】js实现表格的增删改查
说在前面的,写给小白白的,大神请绕道~ 今天用原生js写一下动态表格的增删改查,主要是熟悉一下js的DOM操作. 首先,做一个表格,用来显示提交的数据,如图下: 此处,我添加了编号.姓名.密码.生日. ...
- python学习之-成员信息增删改查
python学习之-成员信息增删改查 主要实现了成员信息的增加,修改,查询,和删除功能,写着玩玩,在写的过程中,遇到的问题,旧新成员信息数据的合并,手机号和邮箱的验证,#!/usr/bin/env p ...
- js实现表格的增删改查
这份代码实现了对表格的增加,删除,更改,查询. 点击一次添加按钮,表格会增加一行. 点击重置按钮,输入框的内容会被清空. 添加一行后,最后两格为更改和删除.点击更改,原有内容会各自显示在一个输入框内, ...
- day84-仿照admin实现一个自定义的增删改查组件
一.admin的使用 app01的admin.py文件: class BookConfig(admin.ModelAdmin): list_display=[] list_display_links= ...
- BitAdminCore框架应用篇：（二）创建一个简单的增删改查模块
NET Core应用框架之BitAdminCore框架应用篇系列 框架演示:http://bit.bitdao.cn 框架源码:https://github.com/chenyinxin/cookie ...
- 基于AT UI实现表格的增删改查遇到的坑
基于AT UI实现表格的增删改查遇到的坑 坑一.表格数据加载的渲染报错 报错:Error in render: "TypeError: Cannot read property 'isChe ...
随机推荐
- Leetcode刷题第004天
class Solution { public: int findKthLargest(vector<int>& nums, int k) { , nums.size()-, k) ...
- rabbitmq3.7.5 centos7 集群部署笔记
1. 准备3台 centos服务器 192.168.233.128 192.168.233.130 192.168.233.131 防火墙放开 集群端口, 这里一并把所有rabbitmq ...
- 如何区分oracle服务器、oracle客户端、plsql？
大家在安装oracle数据库的时候,是不是有很多区分不清的概念,以至于束手无策呢?现在有一个问题,就是怎么区分oracle服务器.oracle客户端.plsql三者的概念?我想,新手在安装的时候可能会 ...
- 5336: [TJOI2018]party
题解: 比较水啦..dp套dp f[i][j][k]表示枚举了前i位,最大公共子序列匹配状态为j,noi匹配到了第k位 因为g[j]和g[j+1]最多差1 所以可以状压成j 然后内层再dp一下搞出下一 ...
- 【BZOJ1778】[Usaco2010 Hol]Dotp 驱逐猪猡
题解: 网上有一种复杂的方法..好像复杂度并没有优势就没看 定义f[i]表示i的期望经过次数,f[i]=sigma{f[j]*p/q/du[j]}+(i==1); 然后高斯消元就可以了 最后求出来的f ...
- Understanding about numerical stability, convergence and consistency
In a computer simulation of the real world, physical quantities, which usually have continuous distr ...
- csv导入数据到mongodb3.2
mongoimport.exe -d paper -c paper K:\paper.csv --type csv -f id,name 数据库名 表名 文件所在位置 文件类型 ...
- 前端本地存储localStorage
1.突破cookie 4K限制,一般浏览器支持5M 2.增 删 改 查 <!DOCTYPE html> <html lang="en"> <head& ...
- 51Nod1231 记分牌 动态规划
原文链接https://www.cnblogs.com/zhouzhendong/p/51Nod1231.html 题目传送门 - 51Nod1231 题意 题解 显然是一个竞赛图相关的题. 我们首先 ...
- IISExpress运行网站时，Service Fabric报Could not load file or assembly 'Microsoft.ServiceFabric.Data' or one of its dependencies. An attempt was made to load a program with an incorrect format.
打开VS TOOLS > OPTIONS > Projects and Solutions > WEB PROJECTS,选中 "Use the 64 bit vers ...