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 ...
随机推荐
- tensorflow：验证码的识别（上）
验证码的识别 主要分成四个部分:验证码的生成.将生成的图片制作成tfrecord文件.训练识别模型.测试模型 使用pyCharm作为编译器.本文先介绍前两个部分 验证码的识别有两种方法: 验证码识别方 ...
- python datetime.datetime is not JSON serializable
1.主要是python list转换成json时对时间报错:datetime.datetime(2014, 5, 23, 9, 33, 3) is not JSON serializable. 2. ...
- VUE，页面跳转传多个参数
<template> <a @click="goNext">Next</a> <input type="text" v ...
- 20165323 实验三 敏捷开发与XP实践
一.实验报告封面 课程:Java程序设计 班级:1653班 姓名:杨金川 学号:20165323 指导教师:娄嘉鹏 实验日期:2018年4月28日 实验时间:13:45 - 15:25 实验序号:实验 ...
- 解决response.setHeader("Content-disposition" 中文乱码问题
Content-Disposition中文乱码 Response.setHeader(”Content-Disposition”, “attachment; filename=” + fileName ...
- C#异常断电后重新启动项目出现配置未初始化错误
转到如截图中所示路径,将其下的数据删掉,就可以启动了.
- org.apache.zookeeper.KeeperException$ConnectionLossException: KeeperErrorCode = ConnectionLoss for /eclipse20171118
1:如果有一天,你有幸看到了这个错误,也许你像我一样low,因为此时,你已经准备开发Zookeeper程序了,却还没有把Zookeeper的服务启动起来. org.apache.zookeeper.K ...
- Sway
啥是Sway: http://livesino.net/archives/7520.live 地址:http://sway.com 现在又可以申请了 试试效果
- 第k个互质数（二分 + 容斥）
描述两个数的a,b的gcd为1,即a,b互质,现在给你一个数m,你知道与它互质的第k个数是多少吗?与m互质的数按照升序排列. 输入 输入m ,k (1<=m<=1000000;1<= ...
- 不同网段无法加载ArcGIS Server发布服务解决方法
问题描述: ArcGIS Server 10发布的服务, (1)在相同网段的Desktop9.3和Engine 9.3程序下可以正常显示, (2)在不同网段Desktop9.3和Engine 9.3程 ...