<!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>
浙公网安备 33010602011771号