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 ...
随机推荐
- C/C++字节序(大端/小端)判断
C/C++大端小端判断 说的是变量的高字节.低字节在内存地址中的排放顺序. 变量的高字节放到内存的低地址中(变量的低字节放到内存的高地址中)==>大端 变量的高字节放到内存的高地址中(变量的低字 ...
- 使用python调用wps v9转换office文件到pdf
#!/usr/bin/python2.6 # -*- coding: utf-8 -*- # pip install timeout-decorator import os import win32c ...
- webpack学习笔记--压缩代码
浏览器从服务器访问网页时获取的 JavaScript.CSS 资源都是文本形式的,文件越大网页加载时间越长. 为了提升网页加速速度和减少网络传输流量,可以对这些资源进行压缩. 压缩的方法除了可以通过 ...
- MySQL主从备份配置实例
转载自:https://www.cnblogs.com/ahaii/p/6307648.html MySQL主从备份配置实例 场景: 1.主服务器192.168.0.225.从服务器192.168.0 ...
- update + join 多表操作
UPDATE vtiger_notificationcf as a INNER JOIN vtiger_crmentity as b ON a.notificationid = b.crmid SET ...
- [转]PyCharm安装及使用
https://www.jianshu.com/p/042324342bf4 PyCharm 搭建环境 1.win10_X64,其他Win版本也可以. 2.PyCharm版本:Professional ...
- Spring Boot配置文件放在jar外部
Spring Boot程序默认从application.properties或者application.yaml读取配置,如何将配置信息外置,方便配置呢? 查询官网,可以得到下面的几种方案: 通过命令 ...
- Python自用笔记
函数:raw_input()和input() 注意:在python3.x中,已经删除raw_input(),取而代之的是input(),当然这仅仅是重命名,用法还是一样.因此在这里介绍的是python ...
- Codechef EDGEST 树套树 树状数组 线段树 LCA 卡常
原文链接http://www.cnblogs.com/zhouzhendong/p/9016579.html 题目传送门 - Codechef EDGEST 题意 给定相同点集上的两棵生成树$T_1$ ...
- BZOJ4802 欧拉函数 数论
原文链接http://www.cnblogs.com/zhouzhendong/p/8117744.html 题目传送门 - BZOJ4802 题意概括 Description 已知N,求phi(N) ...