用vue和layui简单写一个响应式数据展示表

在创建项目之前,先把我们需要的文件打包处理

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="layui.css">

    <script type="text/javascript" src='./vue.js'></script>

    <script type="text/javascript" src='./layui.js'></script>

    <style>

        .tit{

            display: block;

            font-size: 14px;

        }

        .ip-sty{

            margin: 5px ;

            width: %;

            height: 30px;

            border-radius: 5px;

            border: 1px solid rgb(,,);

        }

        .clear{

            overflow: hidden;

        }

        .btns{

            float: left;

            background: rgb(,,);

            border: none;

            border-radius: 5px;

            padding: 4px 15px;

            line-height: 20px;

            margin: 5px 30px 5px ;

            cursor: pointer;

        }

        .btns.reset{

            background: orange

        }

        table{

            width: %;

            /*height: 400px;*/

        }

        .title{

            text-align: center;

            width: %;

            font-size: 22px;

            color: skyblue

        }

        thead tr{

            text-align: left;

        }

        .btns.danger{

            background: orangered

        }

        .btn{

            width: 100px;

            height: 35px;  

        }

        /* 外层阴影 */

        .modal{

            display: block;

            width: %;

            height: %;

            position: fixed;

            left: ;

            top: ;

            z-index: ;

            background-color: rgba(,,,0.5);

        }

        .modal-content{

            width: %;

            height: %;

            max-width: 700px;

            max-height: 500px;

            margin: 100px auto;

            border-radius:10px;

            background-color:#fff;

            -webkit-animation: zoom .6s;

            animation: zoom .6s;

            overflow: auto;

            position: relative;

        }

        .modal-content div{

            width: 300px;

            height: 200px;

            position: relative;

            margin:  auto;

            text-align: center;

            margin-top: 50px;

            /*background: blue;*/

        }

        @-webkit-keyframes zoom{

            from {-webkit-transform: scale()}

            to {-webkit-transform: scale()}

        }

        @keyframes zoom{

            from {transform: scale()}

            to {transform: scale()}

        }  

        .close{

            color: #b7b7b7;

            font-size: 30px;

            font-weight: bold;

            margin-right: 20px;

            transition: all .3s;

            position: absolute;

            right: 10px;

            cursor: pointer;

        }

        .btns.txts{

            background: greenyellow

        }

    </style>

</head>

<body>

    <ul class="layui-nav" lay-filter="">

        <li class="layui-nav-item"><a href="">最新活动</a></li>

        <li class="layui-nav-item layui-this"><a href="">产品</a></li>

        <li class="layui-nav-item"><a href="">大数据</a></li>

        <li class="layui-nav-item">

            <a href="javascript:;">解决方案</a>

            <dl class="layui-nav-child"> <!-- 二级菜单 -->

                <dd><a href="">移动模块</a></dd>

                <dd><a href="">后台模版</a></dd>

                <dd><a href="">电商平台</a></dd>

            </dl>

        </li>

        <li class="layui-nav-item"><a href="">社区</a></li>

    </ul>

    <br>

    <br>

    <br>

    <span class="layui-breadcrumb">

        <a href="">首页</a>

        <a href="">国际新闻</a>

        <a href="">亚太地区</a>

        <a><cite>DataShowTable</cite></a>

    </span>

    <br>

    <br>

    <br>

    <div class="container">

        <div id="modal" class="modal"  v-if="flag">

            <div class="modal-content">

                <span class="close" @click="close">×</span>

                <div>

                    <span>姓名：{{dataBox.username}}</span><br>

                    <span>年龄：{{dataBox.age}}</span><br>

                    <span>性别：{{dataBox.sex}}</span><br>

                </div>

            </div>

        </div>

        <div>

            <label class="tit" >UserName</label>

            <input class="ip-sty" type="text" placeholder="请输入用户名" v-model='username'>

        </div>

        <div>

            <label class="tit">Age</label>

            <input class="ip-sty" type="email" placeholder="请输入年龄" v-model='age'>

        </div>

        <div>

            <label class="tit">Sex</label>

            <input class="ip-sty" type="email" placeholder="请输入性别" v-model='sex'>

        </div>

        <div class="clear">

            <button class="layui-btn layui-btn-radius layui-btn-normal layui-btn-xs"type="submit"  @click = "sub(index)">Sub</button>

            <button class="layui-btn layui-btn-radius layui-btn-warm layui-btn-xs"  @click = 'reset'>Reset</button>

        </div>

        <br>

        <p style="color: skyblue">{{time|parseTime()}}</p>

        <p class="title">用户信息表</p>

        <hr>

        <table class="layui-table">

            <thead>

                <tr>

                    <th>序号</th>

                    <th>UserName</th>

                    <th>Age</th>

                    <th>Sex</th>

                    <th>Operate</th>

                </tr>

            </thead>

            <tbody>

                <tr id="tr" v-for="(value,index) in arr">

                    <th scope="row">{{index+}}</th>

                    <td>{{value.username}}</td>

                    <td>{{value.age}}</td>

                    <td>{{value.sex}}</td>

                    <td id="rem" >

                        <button class="layui-btn layui-btn-radius layui-btn-danger layui-btn-xs" @click = "del(index)">Deleate</button>

                        <button class="layui-btn layui-btn-radius layui-btn-normal layui-btn-xs txts" id="showModel" @click="btn(value)">Details</button>

                    </td>

                </tr>

                <tr id="tr" v-show='arr.length==0'>

                    <td colspan=""  class="text-center" id="rem">暂无数据...</td>

                </tr>

                <tr id="tr" v-show='arr.length!=0'>

                    <td colspan=""  class="text-right" id="rem" ><button class="btns danger" @click = "delAll" >DeleateAll</button></td>

                </tr>

            </tbody>

        </table>

    </div>

    <script type="text/javascript">

        var work = new Vue({

            el:'.container',

            data:{

                username: "",

                age: "",

                sex:'',

                nulldata:'暂无数据',

                arr:[],

                time:new Date(),

                flag:false,

                dataBox:{},

                index:'',

                delIndex:''

            },

            methods:{

                sub:function(){

                    this.arr.push({

                        username:this.username,

                        age: this.age,

                        sex: this.sex

                    })

                    this.username = '',

                    this.age = '',

                    this.sex = ''

                },

                reset(){

                    this.username = '',

                    this.age = '',

                    this.sex = ''

                },

                delAll(){

                    if(confirm('确认全部删除吗？')){

                        this.arr = []

                    }

                },

                del(index){

                    var r=confirm("确认删除吗")

                    if (r) {

                        this.delIndex=index;

                        this.arr.splice(this.delIndex,)

                    }

                },

                btn(value){

                    this.flag=true;

                    this.dataBox=value;

                },

                close(){

                    this.flag=false

                }

            },

            filters:{

                // 解析时间

                parseTime(time){

                    var times = new Date;

                    times.setTime(time)

                          // console.log(times)

                          var year = times.getFullYear();

                          var month = times.getMonth()+;

                          var date = times.getDate();

                          var hour = times.getHours();

                          var mintues = times.getMinutes();

                          var second = times.getSeconds();

                          var ifTime = function (value){

                              if(value<){

                                  return ''+value

                              }else{

                                  return value

                              }

                          }

                          return year + '-' + ifTime(month) + '-' + ifTime(date) + '-' + ifTime(hour) + ':' + ifTime(mintues) + ':' + ifTime(second)

                      }

                  },

            // 定时器

            created(){

                var self=this;

                setInterval(function(){

                    var date=new Date();

                    var time=date.getTime();

                    self.time=time;

                    self.$options.filters.parseTime(time)

                },);

            }

        })

    </script>

    <script>

//注意：导航 依赖 element 模块，否则无法进行功能性操作

layui.use('element', function(){

    var element = layui.element;

  //…

});

</script>

</body>

</html>

现在来看一下渲染后的界面(这里仅实现了添加删除的逻辑)

用vue和layui简单写一个响应式数据展示表的更多相关文章

Vue折腾记 - (3)写一个不大靠谱的typeahead组件
Vue折腾记 - (3)写一个不大靠谱的typeahead组件 2017年07月20日 15:17:05 阅读数:691 前言 typeahead在网站中的应用很多..今天跟着我来写一个不大靠谱的ty ...
vue源码之响应式数据
分析vue是如何实现数据响应的. 前记现在回顾一下看数据响应的原因. 之前看了vuex和vue-i18n的源码, 他们都有自己内部的vm, 也就是vue实例. 使用的都是vue的响应式数据特性及$w ...
Vue2手写源码---响应式数据的变化
响应式数据变化数据发生变化后,我们可以监听到这个数据的变化 (每一步后面的括号是表示在那个模块进行的操作) 手写简单的响应式数据的实现(对象属性劫持.深度属性劫持.数组函数劫持).模板转成 ast ...
使用media Queries实现一个响应式的菜单
Media queries是CSS3引入的一个特性,使用它可以方便的实现各种响应式效果.在这个示例中我们将会使用media queries实现一个响应式的菜单.这个菜单会根据当前浏览器屏幕的大小变化而 ...
一个响应式框架——agera
Google在上周开源了一个响应式框架——agera,相信它会慢慢地被广大程序员所熟知.我个人对这样的技术是很感兴趣的,在这之前也研究过RxJava,所以在得知Google开源了这样的框架之后第一时间 ...
一个响应式数据库框架SQLBrite,完美解决数据库和UI的同步更新！
相信小伙伴们在开发中或多或少都可能遇到过这样的问题:打开一个应用后,为了快速响应,先将数据库中的数据呈现给用户,然后再去网络上请求数据,请求成功之后将数据缓存至数据库,同时更新UI,但是我们经常会这样 ...
media Queries实现一个响应式的菜单
使用media Queries实现一个响应式的菜单 Media queries是CSS3引入的一个特性,使用它可以方便的实现各种响应式效果.在这个示例中我们将会使用media queries实现一 ...
vue 源码自问自答-响应式原理
vue 源码自问自答-响应式原理最近看了 Vue 源码和源码分析类的文章,感觉明白了很多,但是仔细想想却说不出个所以然. 所以打算把自己掌握的知识,试着组织成自己的语言表达出来不打算平铺直叙的写清 ...
使用jQuery开发一个响应式超酷整合RSS信息阅读杂志
在线演示1 本地下载申请达人,去除赞助商链接如果大家喜欢阅读博客文章的话,可能都会使用RSS阅读器,今天这里我们将使用jQuery来开发一个响应式的RSS信息阅读应用,使用它你可以将你喜欢 ...

随机推荐

PlayJava Day017
今日所学: /* 2019.08.19开始学习,此为补档. */ 1.数组变量 a.数组变量是数组的管理者而非数组本身 b.数组必须创建出来然后交给数组变量来管理 c.数组变量之间的赋值是管理权限的赋 ...
windows提权
提权辅助 https://bugs.hacking8.com/tiquan/
ActiveMQ持久化到MySQL以及使用SSL协议通讯
最近公司事情稍微少了点,研究下怎么优化几个系统的交互,因为我们目前使用的是长链接的同步接口,就考虑用下MQ来处理下.由于公司对安全有要求且和CA业务有关,则使用了SSL协议.此文使用的是Activem ...
Data Management Technology(5) -- Recovery
Recovery Types of Failures Wrong data entry Prevent by having constraints in the database Fix with d ...
[Linux] 安装grafana并且添加influxdb监控
安装grafana,官网提供了ubuntu的安装包,直接进行安装 wget https://dl.grafana.com/oss/release/grafana_6.5.1_amd64.deb dpk ...
githup常用备份
https://github.com/ https://github.com/doumeki/ThrExcel https://github.com/xinxi1990/MyMonkey https: ...
【bzoj4945】[Noi2017]游戏（搜索+2-sat）
bzoj 洛谷题意: 现在有$a,b,c$三种车,每个赛道可能会存在限制:$a$表示不能选择$a$类型的赛车,$b,c$同理:$x$表示该赛道不受限制,但$x$类型的个数$\ ...
acwing 2 零一背包问题
地址 https://www.acwing.com/problem/content/description/2/ 题目描述有 N 件物品和一个容量是 V 的背包.每件物品只能使用一次. 第 i 件物品 ...
＂中国东信杯＂广西大学第二届程序设计竞赛E Antinomy与红玉海（二分）
题目大意: n个人,每个人想参加a[i]轮游戏,但每场游戏必须有个一个人当工具人问最少有几场游戏题解: 二分答案范围:[0,sigma a[i]] check:首先a[i]>=ans,其次 ...
【洛谷5299】[PKUWC2018] Slay the Spire（组合数学）
点此看题面大致题意: 有$n$张强化牌$a_i$和$n$张攻击牌$b_i$,每张牌有一个权值(强化牌的权值大于$1$),每张强化牌能使所有攻击牌的权值乘上这张强化牌的权值,每张攻 ...

用vue和layui简单写一个响应式数据展示表

用vue和layui简单写一个响应式数据展示表的更多相关文章

随机推荐

热门专题