<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./lib/bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label>
Id:
<input type="text" class="form-control" v-model="id">
</label>
<label>
Name:
<input type="text" class="form-control" v-model="name" @keyup.enter="add">
</label>
<input type="button" value="添加" class="btn btn-primary" @click="add" >
<label>
搜索名称关键字:
<input type="text" class="form-control" v-model="keywords" v-focus>
</label>
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime | dateFormat(' ')}}</td>
<td>
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 定义的全局过滤器
Vue.filter('dateFormat', function (dateStr, pattern = " ") {
// 根据给定的时间字符串,得到特定的时间
let dt = new Date(dateStr);
let y = dt.getFullYear();
let m = (dt.getMonth() + 1).toString().padStart(2, '0');
let d = dt.getDate().toString().padStart(2, '0');
// return `${y} - ${m} - ${d}`
if (pattern && pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y} - ${m} - ${d}`
} else {
var hh = dt.getHours().toString().padStart(2, '0');
var mm = dt.getMinutes().toString().padStart(2, '0');
var ss = dt.getSeconds().toString().padStart(2, '0');
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
});
// 自定义全局按键修饰符
Vue.config.keyCodes.f2 = 113;
// 使用Vue.directive() 定义全局的指令
// 其中参数1:指令的名称，在定义的时候指令的前面不需要加 v- 前缀
// 在调用的时候,必须在指令前面加 v- 前缀来进行调用
// 参数2 是一个对象，这个对象身上有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
Vue.directive('focus',{
bind:function(el){
// 每当指令绑定到元素上的时候，会立即执行bind函数，只执行一次
// 在每个函数中，第一个参数永远是el，表示被绑定了指令的那个元素，这个el参数，是一个原生的js对象
// 在元素刚绑定了指令的时候，还没有插入到DOM中去，这时候调用focus方法没有作用
// 因为一个元素，只有插入DOM之后，才能获取焦点
// el.focus()
},
inserted:function(el){
// inserted 表示元素 插入到DOM中的时候，会执行inserted函数【触发一次】
el.focus()
},
updated:function(){
// 当vNode更新的时候,会执行updated,可能会触发多次
}
});
let vm = new Vue({
el: "#app", // 挂载点
data: {
id: '',
name: '',
list: [
{id: 1, name: "兰博基尼", ctime: new Date()},
{id: 2, name: "法拉利", ctime: new Date()},
{id: 3, name: "玛莎拉蒂", ctime: new Date()},
{id: 4, name: "劳斯莱斯幻影", ctime: new Date()}
],
keywords: '', // 搜索的关键字
},
methods: {
add() {
let car = {id: this.id, name: this.name, ctime: new Date()};
if (this.id && this.name != "")
this.list.push(car);
this.id = "";
this.name = "";
},
del(id) {
// this.list.some((item,i) =>{
// if(item.id == id){
// console.log(id);
// this.list.splice(i,1);
// // 在数组的some方法中，如果return true，就会终止这个数组的后续的循环
// return true
// }
// })
let index = this.list.findIndex(item => {
if (item.id == id) {
return true
}
});
this.list.splice(index, 1);
},
search(keywords) {
console.log(keywords);
var newList = [];
this.list.forEach(item => {
if (item.name.indexOf(keywords) !== -1) {
newList.push(item)
}
});
return newList
}
},
filters: {
// 定义私有的过滤器
}
})
</script>
</html>