layui怎样将响应数据展示在页面_用vue和layui简单写一个响应式数据展示表

Document

display: block;

font-size: 14px;

}

.ip-sty{

margin: 5px0;

width:80%;

height: 30px;

border-radius: 5px;

border: 1px solid rgb(117,117,117);

}

.clear{

overflow: hidden;

}

.btns{float: left;

background: rgb(0,229,255);

border: none;

border-radius: 5px;

padding: 4px 15px;

line-height: 20px;

margin: 5px 30px 5px0;

cursor: pointer;

}

.btns.reset{

background: orange

}

table{

width:60%;/*height: 400px;*/}

.title{

text-align: center;

width:80%;

font-size: 22px;

color: skyblue

}

thead tr{

text-align: left;

}

.btns.danger{

background: orangered

}

.btn{

width: 100px;

height: 35px;

}/*外层阴影*/.modal{

display: block;

width:100%;

height:100%;

position:fixed;

left:0;

top:0;

z-index: 1000;

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

}

.modal-content{

width:50%;

height:40%;

max-width: 700px;

max-height: 500px;

margin: 100px auto;

border-radius:10px;

background-color:#fff;-webkit-animation: zoom 0.6s;

animation: zoom0.6s;

overflow: auto;

position: relative;

}

.modal-content div{

width: 300px;

height: 200px;

position: relative;

margin:0auto;

text-align: center;

margin-top: 50px;/*background: blue;*/}

@-webkit-keyframes zoom{from {-webkit-transform: scale(0)}

to {-webkit-transform: scale(1)}

}

@keyframes zoom{from {transform: scale(0)}

to {transform: scale(1)}

}

.close{

color: #b7b7b7;

font-size: 30px;

font-weight: bold;

margin-right: 20px;

transition: all0.3s;

position: absolute;

right: 10px;

cursor: pointer;

}

.btns.txts{

background: greenyellow

}

• 最新活动
• 产品
• 大数据

• 解决方案

  移动模块

  后台模版

  电商平台

• 社区

首页

国际新闻

亚太地区

DataShowTable

×

姓名：{{dataBox.username}}

年龄：{{dataBox.age}}

性别：{{dataBox.sex}}

UserName

Age

Sex

Sub

Reset

{{time|parseTime()}}

用户信息表

---

序号UserNameAgeSexOperate

{{index+1}}{{value.username}}{{value.age}}{{value.sex}}

Deleate

Details

暂无数据...DeleateAll

var work = newVue({

el:'.container',

data:{

username:"",

age:"",

sex:'',

nulldata:'暂无数据',

arr:[],

time:newDate(),

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,1)

}

},

btn(value){this.flag=true;this.dataBox=value;

},

close(){this.flag=false}

},

filters:{//解析时间

parseTime(time){var times = newDate;

times.setTime(time)//console.log(times)

var year =times.getFullYear();var month = times.getMonth()+1;var date =times.getDate();var hour =times.getHours();var mintues =times.getMinutes();var second =times.getSeconds();var ifTime =function (value){if(value<10){return '0'+value

}else{returnvalue

}

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

}

},//定时器

created(){var self=this;

setInterval(function(){var date=newDate();var time=date.getTime();

self.time=time;

self.$options.filters.parseTime(time)

},1000);

}

})

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

layui.use('element', function(){var element =layui.element;//…

});