版权声明：请尊重每个人的努力！ https://blog.csdn.net/IndexMan/article/details/88950050
知识点
1.双向数据绑定
2.自定义指令
3.自定义过滤器
4.v-for循环对象数组
5.ES6操作数组的新方法：forEach some filter findIndex
实现效果
页面源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<link rel="stylesheet" href="./lib/bootstrap-3.3.7.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-striped table-hover table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<!-- v-for中的数据默认是从data上的list直接渲染来的 -->
<!-- 现在改为动态的方法查询 -->
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.ctime | dateFormate('') }}</td>
<td><a href="" @click.prevent="del(item.id)">删除</a></td>
</tr>
</tbody>
</table>
</div>
<script>
// 全局自定义指令
Vue.directive('focus', {
inserted: function(el){
el.focus()
}
})
// 全局时间过滤器
Vue.filter('dateFormate', function(dateStr, pattern) {
var dt = new Date(dateStr)
var y = dt.getFullYear()
var m = (dt.getMonth() + 1).toString().padStart(2, '0')
var d = dt
.getDate()
.toString()
.padStart(2, '0')
// return `${y}-${m}-${d}`
if (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}`
}
})
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
keywords: '',
list: [
{ id: 1, name: '奔驰', ctime: new Date() },
{ id: 2, name: '宝马', ctime: new Date() }
]
},
methods: {
// 添加
add() {
if (this.id != '' && this.name != '') {
var car = { id: this.id, name: this.name, ctime: new Date() }
this.list.push(car)
this.id = ''
this.name = ''
}
},
// 删除
del(id) {
// 方法一
/* this.list.some((item,i)=>{
if(item.id == id){
this.list.splice(i, 1)
return true
}
}) */
// 方法二
var index = this.list.findIndex(item => {
if (item.id == id) {
return true
}
})
this.list.splice(index, 1)
},
// 条件查询
search(keywords) {
/*
方法1
var newList = [];
this.list.forEach(item => {
if(item.name.indexOf(keywords) != -1){
newList.push(item)
}
});
return newList;
*/
// forEach some filter findIndex
return this.list.filter(item => {
if (item.name.includes(keywords)) {
return item
}
})
}
}
})
</script>
</body>
</html>