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

<!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简单写一个响应式数据展示表的更多相关文章

  1. Vue折腾记 - (3)写一个不大靠谱的typeahead组件

    Vue折腾记 - (3)写一个不大靠谱的typeahead组件 2017年07月20日 15:17:05 阅读数:691 前言 typeahead在网站中的应用很多..今天跟着我来写一个不大靠谱的ty ...

  2. vue源码之响应式数据

    分析vue是如何实现数据响应的. 前记 现在回顾一下看数据响应的原因. 之前看了vuex和vue-i18n的源码, 他们都有自己内部的vm, 也就是vue实例. 使用的都是vue的响应式数据特性及$w ...

  3. Vue2手写源码---响应式数据的变化

    响应式数据变化 数据发生变化后,我们可以监听到这个数据的变化 (每一步后面的括号是表示在那个模块进行的操作) 手写简单的响应式数据的实现(对象属性劫持.深度属性劫持.数组函数劫持).模板转成 ast ...

  4. 使用media Queries实现一个响应式的菜单

    Media queries是CSS3引入的一个特性,使用它可以方便的实现各种响应式效果.在这个示例中我们将会使用media queries实现一个响应式的菜单.这个菜单会根据当前浏览器屏幕的大小变化而 ...

  5. 一个响应式框架——agera

    Google在上周开源了一个响应式框架——agera,相信它会慢慢地被广大程序员所熟知.我个人对这样的技术是很感兴趣的,在这之前也研究过RxJava,所以在得知Google开源了这样的框架之后第一时间 ...

  6. 一个响应式数据库框架SQLBrite,完美解决数据库和UI的同步更新！

    相信小伙伴们在开发中或多或少都可能遇到过这样的问题:打开一个应用后,为了快速响应,先将数据库中的数据呈现给用户,然后再去网络上请求数据,请求成功之后将数据缓存至数据库,同时更新UI,但是我们经常会这样 ...

  7. media Queries实现一个响应式的菜单

    使用media Queries实现一个响应式的菜单   Media queries是CSS3引入的一个特性,使用它可以方便的实现各种响应式效果.在这个示例中我们将会使用media queries实现一 ...

  8. vue 源码自问自答-响应式原理

    vue 源码自问自答-响应式原理 最近看了 Vue 源码和源码分析类的文章,感觉明白了很多,但是仔细想想却说不出个所以然. 所以打算把自己掌握的知识,试着组织成自己的语言表达出来 不打算平铺直叙的写清 ...

  9. 使用jQuery开发一个响应式超酷整合RSS信息阅读杂志

    在线演示1 本地下载     申请达人,去除赞助商链接 如果大家喜欢阅读博客文章的话,可能都会使用RSS阅读器,今天这里我们将使用jQuery来开发一个响应式的RSS信息阅读应用,使用它你可以将你喜欢 ...

随机推荐

  1. GO语言介绍以及开发环境配置

    一.介绍 GO语言是静态强类型语言 静态也就是编译型语言 二.安装 1.下载地址 下载地址 https://golang.google.cn/dl/ 2.安装 Linux安装 1.下载二进制包:go1 ...

  2. CSS 从大图中选取部分区域作为目标图标

    从大图中选取部分区域作为目标图标 by:授客 QQ:1033553122 1.图片素材 图片素材如下(大小:137px * 264px),图中从上到下,连续存放了两张100px * 100px的图   ...

  3. docker-compose 使用自定义网络并绑定 IP

    0x00 事件 原先使用了 docker network create mynetwork 的方式创建了自定义网络,在使用 docker-compose 工具运行服务的时候,需要容器使用 mynetw ...

  4. c# 获取sqlserver 运行脚本的print消息的方法分享

    转自:http://www.maomao365.com/?p=6923  摘要: 在sql脚本的编写中,我们经常使用sql脚本print消息,作为输出测试, 通过获取print消息,我们可以快速获取程 ...

  5. 公司员工表示 nginx 之父被警方带走

    ZDNet 12 日报导,俄罗斯警方当天突击搜查了 NGINX 公司(nginx 服务器项目商业化公司)在莫斯科的办事处,并带走了 NGINX 公司联合创始人 Igor Sysoev 与 Maxim ...

  6. CentOS 7 配置SVN 笔记

    一.通过yum 安装软件 yum install subversion -y 配置nfs 用来做版本库(略过) 格式 : NFS共享的目录 NFS客户端地址1(参数1,参数2,...) 客户端地址2( ...

  7. vue项目中引入特殊字体

    特殊字体指的是默认电脑中没有的 1.下载字体 2.新建文件夹font,把字体放进去 3.新建font.css 4.使用@font-face设置字体 @font-face { font-family: ...

  8. mysql用户数据库只读权限提升全局权限

    1.只读用户登录数据库 2.执行命令: mysql> unlock tables;mysql> set global read_only=0;

  9. cf 之lis+贪心+思维+并查集

    https://codeforces.com/contest/1257/problem/E 题意:有三个集合集合里面的数字可以随意变换位置,不同集合的数字,如从第一个A集合取一个数字到B集合那操作数+ ...

  10. cf rock is push 【dp】

    附上学习的博客:https://blog.csdn.net/u013534123/article/details/102762673 大致题意:一个迷宫,里面有很多箱子,你可以向右或者向下走.当你遇到 ...