<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> [v-cloak]{ display: none; } #app{ width: 800px; margin: 20px auto; } #tb{ width: 800px; border-collapse: collapse; margin: 20px auto; } #tb th{ background-color: #0094ff; color:white; font-size: 16px; padding: 5px; text-align: center; border: 1px solid black; } #tb td{ padding: 5px; text-align: center; border: 1px solid black; } </style> <script src="vue221.js"></script> </head> <body> <div id="app"> <div class="header"> <input type="number" v-model="id" pattern="[0-9]*"> <input type="text" v-model="pname" @keydown.f2="addData"> <button @click="addData">添加数据</button> <br> <input type="text" v-focus v-color="color" placeHolder="请输入筛选内容" v-model="sname"> </div> <table id="tb"> <tr> <th>编号</th> <th>名称</th> <th>创建时间</th> <th>操作</th> </tr> <tr v-show="list.length == 0"> <td colspan="4">当前列表没有任何数据</td> </tr> <tr v-for="(item, index) in filteredlist" :key="item.id"> <td v-cloak>{{ item.id }}</td> <td v-cloak>{{ item.name }}</td> <td v-cloak>{{ item.ctime | datefmt("YYYY-MM-DD hh:mm:ss") }}</td> <td><a v-bind="{href:‘http://itcast.cn/index/‘+item.id}" style="visibility: hidden;"></a><a href="javaccript:void(0);" @click="delData(index)">删除</a></td> </tr> </table> </div> </body> <script> Vue.config.keyCodes.f2 = 113; console.log(Vue.config.keyCodes); Vue.directive(‘focus‘, { inserted: function(el) { el.focus(); } }); Vue.directive(‘color‘,{ bind: function(el, binding) { el.style.color = binding.value; } }); Vue.filter("datefmt", function(value, options) { var res = ""; var year = value.getFullYear(); var month = value.getMonth()+1; month = month > 9 ? month : "0" + month; var day = value.getDate(); day = day > 9 ? day : "0" + day; res = year + ‘-‘ + month + ‘-‘ + day; if(options == "YYYY-MM-DD hh:mm:ss") { var hour = value.getHours(); hour = hour > 9 ? hour : "0" + hour; var minutes = value.getMinutes(); minutes = minutes > 9 ? minutes : "0" + minutes; var seconds = value.getSeconds(); seconds = seconds > 9 ? seconds : "0" + seconds; res += " " + hour + ":" + minutes + ":" + seconds; } return res; }); var vm = new Vue({ el: "#app", data: { color: ‘red‘, id: 0, pname: "", sname: "", list: [{ id: 0, name: "宝马", ctime: new Date() },{ id: 1, name: "奔驰", ctime: new Date() }] }, computed: { filteredlist: function() { //通过名字过滤 // var self = this; // return self.list.filter(function (item) { // return item.name.indexOf(self.sname) !== -1 // }) var self = this; return self.list.filter(function (item) { var searchRegex = new RegExp(self.sname, ‘i‘); return searchRegex.test(item.name) }) } }, methods: { addData: function() { //添加数据 var newObj = { id: this.id, name: this.pname, ctime: new Date() }; this.list.push(newObj); this.id = 0; this.pname = ""; }, delData: function(index) { if(!confirm("是否要删除数据?")) { return false; } this.list.splice(index, 1); } } }); </script> </html>
