今天是学习vue的第二天,通过对vue指令和vue计算属性以及过滤器做一个学生管理系统的demo来巩固自己学习的内容。感觉还不错,又是进步的一天,喔喔喔~~!
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学生管理系统</title> <script src="vue.js"></script> </head> <style> *{ margin: 0; padding: 0; } #app{ margin: 100px 100px; } table{ margin-top: 10px; width: 100%; background-color: #000000; } input{ -web-kit-appearance:none; -moz-appearance: none; border-spacing: 2px 4px; border: solid 1px deepskyblue; border-radius: 2px; font-size:15px; height:2em; border:1px solid #c8cccf; color:#6a6f77; } table tr{ background-color: #fff; } table tr td{ padding: 0px 3px; } table tr td:last-child{ text-align: center; padding: 2px 5px; } table tr td a{ font-size: 12px; /*text-decoration: none;*/ color: dodgerblue; } form{ display: flex; } form input{ margin-right: 15px; } input[type="button"]{ border-radius: 2px; border: solid 1px skyblue; padding: 2px 15px; } th{ border-spacing: 2px ; font-style: normal; font-size: 16px; color: dodgerblue; font-weight: normal; } </style> <body> <div id="app"> <form v-show="isShow"> <input type="number" placeholder="请输入序号" v-model="person.id"> <input type="text" placeholder="请输入姓名" v-model="person.name"> <input type="number" placeholder="请输入年龄" v-model="person.age"> <input type="button" @click="add" value="新增"></input> <input type="button" @click="query" value="查询"></input> </form> <table> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>当前时间</th> <th>操作</th> </tr> <tr v-for="(person,index) in persons"> <td><input v-model="person.id" :disabled="isDisabled"></td> <td><input v-model="person.name" :disabled="isDisabled"></td> <td><input v-model="person.age" :disabled="isDisabled"></td> <td><input :value="time|dateFormat('YYYY-MM-DD')" :disabled="true"></td> <td> <a href="#" @click.prevent="edit">编辑</a> <a href="#" @click.prevet="deleteinfo(index)">删除</a> <br> <a href="#" @click.prevent="togglemore">更多操作</a> </td> </tr> </table> </div> <script> Vue.filter("dateFormat",function (value,fmtStr){ let time=new Date(value); let year=time.getFullYear()+""; let month=time.getMonth()+1+""; let day=time.getDay()+""; let hours=time.getHours()+""; let minutes=time.getMinutes()+""; let seconds=time.getSeconds()+""; if (fmtStr==="YYYY-MM-DD"&&fmtStr){ return `${year}-${month.padStart(2,"0")}-${day.padStart(2,"0")}` }else{ return `${year}-${month.padStart(2,"0")}-${day.padStart(2,"0")} ${hours.padStart(2,"0")}:${minutes.padStart(2,"0")}:${seconds.padStart(2,"0")}` } }) let vue=new Vue( { el:"#app", data:{ isShow:false, isDisabled:true, persons:[ {id:1,name:'shanjialan1111',age:"19"}, {id:2,name:'shanjialan2222',age:"20"}, {id:3,name:'shanjialan3333',age:"21"}, {id:4,name:'shanjialan4444',age:"22"}, ], person:{id:"",name:"",age:""}, time:Date.now() }, methods:{ edit(){ this.isDisabled=false; }, deleteinfo(index){ this.persons.splice(index, 1); }, togglemore() { this.isShow=!this.isShow; }, add(){ this.person.time=Date.now(); this.persons.push(this.person); }, query(){ let newPerson=[]; newPersons=this.persons.filter((person)=>{ if (this.person.age === person.age){ return true; } }); this.persons=newPersons; } } } ) </script> </body> </html>
运行结果如下:
1.初始状态
2.增添
3.编辑
4.删除
5.查询