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 ...

随机推荐

Django-model聚合查询与分组查询
Django-model聚合查询与分组查询聚合函数包含:SUM AVG MIN MAX COUNT 聚合函数可以单独使用,不一定要和分组配合使用:不过聚合函数一般和group by 搭配使用 agg ...
一脸懵逼学习Java操作Excel之POI（Apache POI）
Apache POI是Apache软件基金会的开放源码函式库,POI提供API给Java程序对Microsoft Office格式档案读和写的功能. 1:下面简单的程序来创建一个空白Microsoft ...
la 4490
题解: 这道思路还是比较水的我们可以等价变形成hi<=7 我们的最优决策是把抽出来的那些相同颜色的书最后插在一起(所以要统计序列中还有没有相同元素的书) f[i][j][k][x]表示前i本书 ...
Python自带IDE设置字体
打开Python 3.7.0 shell 点击菜单项 “”Options“”>"Configure IDLE" 可选择窗口的字体和大小可选择背景主题颜色可自定义配置
3步实现ssh面密码登录
1.上次本机的公钥和私钥 [root@vicweb ~]#ssh-keygen -t rsa Generating public/private rsa key pair. Enter file in ...
python全栈开发day55-mysql外键的三种变种
一.昨日内容回顾二.今日内容总结三.mysql应知必会你可以通过INFORMATION_SCHEMA.KEY_COLUMN_USAGE 表来查看. select * from INFORMATI ...
Python_生成器generator
生成器:调用时返回一个迭代器如果一个函数中包含yield语法,那这个函数就会变成一个生成器例1: def draw_money(draw): #这个函数称为生成器 while draw >0 ...
12px以下字体显示问题
刚接到广告公司出的设计稿,里面很多内容均是12px以下得字体,现在来总结一下解决办法,方便以后使用 1.使用png图片但是会影响页面响应速度 2.使用transform: scale(0.x); 注 ...
UOJ#275. 【清华集训2016】组合数问题数位dp
原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ275.html 题解用卢卡斯定理转化成一个 k 进制意义下的数位 dp 即可. 算答案的时候补集转化一下 ...
Codeforces 873F Forbidden Indices 字符串 SAM/(SA+单调栈)
原文链接https://www.cnblogs.com/zhouzhendong/p/9256033.html 题目传送门 - CF873F 题意给定长度为 $n$ 的字符串 $s$,以及给定这个字 ...

VueJs初步学习，一个表格的增删改查

VueJs初步学习，一个表格的增删改查的更多相关文章

随机推荐

热门专题