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 ...
随机推荐
- 反序列化json的坑
json格式没有错误,内容没有什么异常 反序列化一直显示第一行有异常符号, 在https://jsonlint.com/上面检测了一下,发现了这个 解决办法: UTF-8格式编码 改成 UTF-8无B ...
- 关于HTML或JS加密解密的七种方式
本文一共介绍了七种方法: 一:最简单的加密解密 二:转义字符""的妙用 三:使用Microsoft出品的脚本编码器Script Encoder来进行编码 (自创简 ...
- 页面布局之--Font Awesome+导航
页面布局之--Font Awesome+导航 Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果. 下载地址 ...
- python内置的魔术命令(builtin magic commands)
在ipython或者jupyter notebook中,会出现"%"开头并且一个很短的命令,例如交互式的matlablib绘图: %matplotlib inline 之前一直不知 ...
- SQL Server INSET/UPDATE/DELETE的执行计划
DML操作符包括增删改查等操作方式. insert into Person.Address (AddressLine1, AddressLine2, City, StateProvinceID, Po ...
- xxl系列部署启动通用办法
http://10.10.6.186:8080/xxl-job-admin # 编译mvn compile # 清理mvn clean # 打包mvn package # 先清理后编译mvn clea ...
- java keystore
JAVA有一个keystore用来存放私钥和证书,该文件是伴随JDK默认存在的,路径默认是/lib/security/cacerts,默认密码是changeit,实际上空密码也可以直接访问 其中cac ...
- [转] 用webpack的CommonsChunkPlugin提取公共代码的3种方式
方式一,传入字符串参数 new webpack.optimize.CommonsChunkPlugin(‘common.js’), // 默认会把所有入口节点的公共代码提取出来,生成一个common. ...
- spring security实现动态配置url权限的两种方法
缘起 标准的RABC, 权限需要支持动态配置,spring security默认是在代码里约定好权限,真实的业务场景通常需要可以支持动态配置角色访问权限,即在运行时去配置url对应的访问角色. 基于s ...
- rimraf node_modules 快速删除
npm install -g rimraf // 先进行全局安装 rimraf node_modules // 进行删除 -------------------------------- ...