用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信息阅读应用,使用它你可以将你喜欢 ...
随机推荐
- IDEA中安装EasyCode插件并连接数据库生成代码
场景 EasyCode是基于IntelliJ IDEA开发的代码生成插件,支持自定义任意模板(Java,html,js,xml).只要是与数据库相关的代码都可以通过自定义模板来生成.支持数据库类型与j ...
- 简单的LNMP安全加固
安全加固 Nginx安全加固: Nginx配置文件 (nginx.conf):/usr/local/nginx/nginx.conf 禁用autoindex: autoindex:是Nginx的目录浏 ...
- IDEA 运行后乱码问题解决
页面乱码: 在edit configurations->vm options 添加 -Dfile.encoding=UTF-8 调整idea文件编码格式,全部为 UTF-8 (file -> ...
- Thymeleaf常用语法：HTML属性设置
使用Thymeleaf的属性来设置HTML属性.(1)使用th:attr属性可以修改原来HTML节点的属性:(2)th:attr属性可以同时设置多个属性:(3)每一个HTML属性都有对应的Thymel ...
- 转战物联网·基础篇05-通俗理解MQTT协议的实现原理和异步方式
网络上搜索MQTT协议,会出现太多的解释,这里就不做官方标准释义的复制了.这一节我们从实战理解角度,通俗的将MQTT协议的作用及实现原理说一下,旨在可以快速理解MQTT协议.所以可能会出现很多看似 ...
- CCSpriteFrameCache的使用
配置环境:win7+Cocos2d-x.2.0.3+VS2012 CCSpriteFrameCache是帧缓存类. 通过plist文件导入图片 CCSpriteFrameCache::sharedSp ...
- CSS中层叠和继承的概念。
继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码: 1 2 3 4 5 6 7 8 9 <ht ...
- 设计模式-FlyWeight(结构型模式) 针对 需要创建大量对象的情形，被共享的状态作为内部状态，不被共享的状态作为外部状态
以下代码来源: 设计模式精解-GoF 23种设计模式解析附C++实现源码 //Flyweight.h #pragma once #include<string> class FlyWeig ...
- 2019 SDN上机第7次作业
2019 SDN上机第7 次作业 basic补充`/* -- P4_16 -- */ include <core.p4> include <v1model.p4> const ...
- [题解向] CF#Global Round 1の题解(A $\to$ G)
这里是总链接\(Link\). \(A\) 题意:求\(\sum_{i=1}^{k} a_i\times b^{k-i}\)的奇偶性, \(k = \Theta(n \log n)\) --其实很容易 ...