用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信息阅读应用,使用它你可以将你喜欢 ...

随机推荐

Cypress 之环境配置
将项目添加到cypress时,cypress.json会在项目中创建一个文件,此文件用于存储projectId,以及你提供的任何配置项. { "projectId": " ...
PAT 1009 Product of Polynomials 模拟
This time, you are supposed to find A*B where A and B are two polynomials. Input Specification: Each ...
Java 中 PO 与 VO 的区别
什么是PO PO(Persistence Object 持久化对象)是直接跟持久层数据库打交道的java Bean (model,entity,bean等叫法都是可以的),里面除了私有的成员变量之外, ...
Unix 开发中的 Make 三连
Unix 开发过程中,经常性的操作是从源码编译安装相应库文件,所以下面三个命令便是家常便饭,俗称三连: ./configure make make install 下面来看看这三步分别做了什么. co ...
sql server 2014 卸载
遇到一个沙雕工程人员~二话不装给我装了2014的版本,实际开发的时候用的是2012....欸~ 1.打开服务 2.打开控制面板下的程序与功能 3选中红框点击卸载与更改----->选择删除 4.然 ...
.net 发送qq邮件
最近开发一个项目,需要给客户发送报告邮件,在开发中遇到本地调试发送邮件一切正常,但当部署到服务器上的时候,一直返回“发送失败”,在此记录,以免以后采坑 webapi 端代码: /// <summ ...
jQuery跳转到另一个页面以及原生js跳转到另一个页面
1.原生js我们可以利用http的重定向来跳转 window.location.replace("https://www.cnblogs.com/pythonywy/"); 2.原 ...
PHP mysqli_fetch_object MySQLi 函数
定义和用法 mysqli_fetch_object - 返回结果集的当前行作为对象版本支持 PHP4 PHP5 PHP7 不支持支持支持语法 mysqli_fetch_object ( mys ...
[b0043] python 归纳 (二八)_python测试使用快速上手
参考 Python必会的单元测试框架 —— unittest # -*- coding: utf-8 -*- """ 测试代码组织,整理( 非可执行) "&qu ...
Pycharm界面的子窗口不见了，怎么办？
pycharm程序界面一般有很多子窗口,如图1所示. 图1 Pycharm子窗口如果你发现某些子窗口不见了,图2是最过分的情形,无须担心. 图2 Pycharm界面的子窗口不见了打开项目视图子 ...

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

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

随机推荐

热门专题