<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../lib/css/bootstrap.min.css">
<script src="../lib/js/vue.js"></script>
</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:
<!-- @keyup.enter按键修饰符 按enter 键添加，也可直接@keyup.键码
自定义的按键修饰符可以 @keyup.f2 调用-->
<input type="text" class="form-control" v-model="name" @keyup.f2="add">
</label>
<!-- 在vue中使用事件绑定机制，为元素指定处理函数时，如果加了括号，就可以给函数传参 -->
<input type="button" value="添加" class="btn btn-primary" @click="add()">
<label>
搜索名称关键字:
<input type="text" class="form-control" v-model="keywords">
</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>
<!-- v-for 中自定义一个方法，把关键字通过传参的形式传递给了 search 方法
在search 方法内部，通过执行 for 循环，把所有符合 搜索关键字的数据，保存到一个数组中，返回-->
<tr v-for = 'item in search(keywords)' :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.ctime | dataFilter }}</td>
<td>
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
//定义全局过滤器进行时间的格式化
Vue.filter('dataFilter',function (dataStr) {
//根据给定的时间字符串，得到特定的时间
var dt = new Date(dataStr);
var y = dt.getFullYear();
var m = dt.getMonth() + 1;
var d = dt.getDate();
// return y + '-' + m + '-' + d;
return `${y}-${m}-${d}`
});
//自定义全局按键修饰符
Vue.config.keyCodes.f2 = 113;
const vm = new Vue({
el:'#app',
data:{
id:'',
name:'',
keywords:'',
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()},
{id:5,name:'奥迪',ctime:new Date()},
]
},
methods:{
add(){
// alert('111')
/**
* 分析：
* 1. 获取到ID和name 直接从data上获取
* 2. 组织出一个对象
* 3. 把这个对象调用数组的相关方法，添加到当前data上的list中
* 注意：在 vue 中，已经实现了数据的双向绑定，等我们修改了 data 上的数据，
* vue 会默认监听数据的改动，自动把最新的数据应用到页面上
*/
var car = { id:this.id,name:this.name,ctime:new Date() };
this.list.push(car);
this.id = this.name = null
},
del(id){ // 根据ID删除数据
/**
* 分析：
* 1.如何根据ID找到要删除这一项的索引
* 2.找到索引了直接调用数组的splice方法
*/
this.list.some((item,i)=>{
if(item.id === id){
this.list.splice(i,1);
return true
}
})
},
search(keywords){ //根据关键字，进行数据的搜索
var newList = [];
this.list.forEach(item=>{
if(item.name.indexOf(keywords) != -1){
newList.push(item)
}
});
return newList
}
}
})
</script>
</body>
</html>