Before you create a project, we need to first file packing process
<!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 0; 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 5px 0; 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; } / * Outer shadow * / .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: zoom 0.6s; overflow: auto; position: relative; } .modal-content div{ width: 300px; height: 200px; position: relative; margin: 0 auto; 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: all 0.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:;"> Solutions </a> <DL class = " layui-NAV-Child " > <-! secondary menu -> <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= ""> World News </a><a href= ""> Asia-Pacific region </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 = " Please enter a user name " V-Model = ' username ' > </div> <div> <label class="tit">Age</label> <INPUT class = " IP-STY " type = " In Email " placeholder = " Please enter Age " V-Model = ' Age ' > </div> <div> <label class="tit">Sex</label> <INPUT class = " IP-STY " type = " In Email " placeholder = " Please enter your gender " 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 " > user information table </ p> <hr> <table class="layui-table"> <thead> <tr> <Th> ID </ 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+1}}</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="4" class="text-center" id="rem">暂无数据...</td> </tr> <tr id="tr" v-show='arr.length!=0'> <td colspan="4" 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: ' No data ' , arr:[], time:new Date(), flag:false, dataBox:{}, index:'', subindices: '' }, 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 The ( ' confirm delete all do? ' )) { the this .arr = [] } }, del(index){ var R & lt Confirm = ( " Confirm to delete it " ) IF (R & lt) { the this .delIndex = index; the this .arr.splice ( the this .delIndex, . 1 ) } }, btn(value){ this.flag=true; this.dataBox=value; }, close(){ this.flag=false } }, filters:{ // resolution time parseTime (Time) { var Times = new new a Date; 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{ return value } } return year + ' - ' + iftimi (month) + ' - ' + iftimi (data) + ' - ' + iftimi (hour) + " : " + iftimi (mintues) + " : " + iftimi (second) } }, // Timer Created () { var Self = the this ; setInterval(function(){ var date=new Date(); var time=date.getTime(); self.time=time; self.$options.filters.parseTime(time) },1000); } }) </script> <script> // Note: Navigation module dependent element, or can not perform the functional operations layui.use ( ' element ' , function () { var element = layui.element; //… }); </script> </body> </html>
Now look at the interface rendering (here only to achieve a logical add deleted)