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 ...
随机推荐
- markdown 相关零碎知识
1.尖括号<>在markdown会被当做html符号,解决办法:用转义字符,如:<测试> 可以写作<:测试>
- 查找所有sphinx引擎表并生成创建表的语句
-- 查找所有sphinx引擎select group_concat(table_name separator ' ') from information_schema.tables where en ...
- .netcore读取配置文件
setting.json { "compilerOptions": { "noImplicitAny": false, "noEmitOnError& ...
- [转] 深入浅出mongoose-----包括mongoose基本所有操作,非常实用!!!!!
深入浅出mongoose mongoose是nodeJS提供连接 mongodb的一个库. 此外还有mongoskin, mongodb(mongodb官方出品). 本人,还是比较青睐mongoose ...
- Spring MVC基础知识整理➣环境搭建和Hello World
概述 Spring MVC属于SpringFrameWork的产品,采用Model-View-Controller进行数据交互,已经融合在Spring Web Flow里面.Spring 框架提供了构 ...
- linux改权限
改变文件夹本身权限,不改动子文件(夹) chmod 600 my/ 改变文件夹及子目录下所有文件(夹)权限 chmod -R 777 my/ 统一修改 cd my 修改文件夹权限为755 find - ...
- lojround3
A.绯色 IOI(开端) 首先注意到是完全图,数据范围又很大,肯定要观察一些性质 我们化简一下式子 发现其实是要求simga(xixj)最大 那么结论就很好想了 最大的和次大的第三大的连一起...然后 ...
- net core体系-web应用程序-4asp.net core2.0 项目实战（1）-3项目架构说明
本文目录1. 摘要2. 框架介绍 3. 权限管理之多一点说明4. 总结 1. 摘要 NCMVC角色权限管理框架是由最近练习Net Core时抽时间整理的系统,后续能不能发展成一个cms还要看朋友们是 ...
- FastJson 数组、List、Set、Map基本序列化与日期格式化
摘要: FastJson可以直接序列化数组.List.Set.Map等,也可以直接支持日期类型数据的格式化,包括java.util.Date.java.sql.Date.java.sql.Timest ...
- Codeforces 1101F Trucks and Cities dp (看题解)
Trucks and Cities 一个很显然的做法就是二分然后对于每个车贪心取check, 这肯定会TLE, 感觉会给人一种贪心去写的误导... 感觉有这个误导之后很难往dp那个方向靠.. dp[ ...