用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信息阅读应用,使用它你可以将你喜欢 ...
随机推荐
- 解决NuGet下载太慢的问题
以下载CefSharp.Wpf v57.0.0版本为例: 1.打开NuGet官网:https://www.nuget.org/ 2.输入CefSharp.Wpf,点击查询,如下所示: 3.确认版本正确 ...
- 网络协议 15 - P2P 协议
大家说起种子,应该都知道是用来下载资源的.那么资源下载都有哪些方式?种子下载又有什么优势呢? 下载电影的两种方式 第一种是通过 HTTP 进行下载.这种方式,有过经历的人应该体会到,当下载文件 ...
- C# 新特性 操作符单?与??和 ?. 的使用
1.单问号(?) 1.1 单问号运算符可以表示:可为Null类型,C#2.0里面实现了Nullable数据类型 //A.比如下面一句,直接定义int为null是错误的,错误提示为无法将null转化成i ...
- flutter 打包apk
打包的具体操作,可以参照官网,只是官网没有那么细 1.修改AndroidManifest.xml 2.构建配置 可以跳过 3.构建签名 4.创建 key.properties 5.配置混淆 6.修改 ...
- 使用vue在开发中的一些小问题--利用环境变量做一些常量的定义
1.集中式的环境配置: (1)使用vue-cli基本上不用去处理什么,只需要在config文件夹下的文件中配置写既可: module.exports = merge(prodEnv, { NODE_E ...
- GitHub最强技术面试手册：Tech Interview Handbook
摘要: 求职还是需要认真准备的. 原文:超实用技术面试手册,从工作申请.面试考题再到优势谈判,GitHub获30000星 作者:量子位 技术人员求职面试,单刷leetcode上的大厂题库可能还不够. ...
- 网络时间服务和chrony
⽹络时间服务和chrony 实验练习: 准备实验环境: 可用的centos6.7系统. centos6 :192.168.37.6 centos7 :192.168.37.7 关闭selinux 关闭 ...
- Pycharm界面的子窗口不见了，怎么办？
pycharm程序界面一般有很多子窗口,如图1所示. 图1 Pycharm子窗口 如果你发现某些子窗口不见了,图2是最过分的情形,无须担心. 图2 Pycharm界面的子窗口不见了 打开项目视图子 ...
- 201871010132-张潇潇《面向对象程序设计(java)》第一周学习总结
面向对象程序设计(Java) 博文正文开头 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cn ...
- 算法设计与分析 1.1 Joyvan的矩阵
★题目描述 Joyvan有一个大小为n * m的矩阵,现在他要对矩阵进行q次操作,操作分为如下三种: 0 x y:交换矩阵的x.y两行. 1 x y:交换矩阵的x.y两列. 2 x y:求当前矩阵第x ...