1.源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="vue.js"></script>
<link rel="stylesheet" href="./lib/boot-strap.css" />
<title>品牌案例</title>
</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>
<label>
<input type="button" value="添加" class="btn btn-primary "
@click="add()"/>
</label>
<label>
搜索名称关键字：
<input type="text" class="form-control" v-model="keywords"/>
</label>
</div>
</div>
<table class="table table-hover table-bordered 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">
<th>{{item.id}}</th>
<th>{{item.name}}</th>
<th>{{item.ctime | dataFormat}}</th>
<td>
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
Vue.filter('dataFormat',function(dateStr,pattern=""){
var dt = new Date(dateStr)
var year = dt.getFullYear()
var month = (dt.getMonth() + 1).toString().padStart(2,'0')
var day = dt.getDate().toString().padStart(2,'0')
if(pattern.toLowerCase() === 'yyy-mm-dd'){
return `${year}-${month}-${day}`
}else{
var hour = dt.getHours().toString().padStart(2,'0')
var monent = dt.getMinutes().toString().padStart(2,'0')
var seconds = dt.getSeconds().toString().padStart(2,'0')
return `${year}-${month}-${day} ${hour}:${monent}:${seconds}`
}
})
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(){
// console.log('ok')
this.list.push({id:this.id,name:this.name,ctime:new Date()})
this.id = this.name = ' '
},
del(id){
var index = this.list.findIndex(item =>{
if(item.id == id)
return true;
})
this.list.splice(index,1)
},
search(keywords){
/*var newList = [] 用forEach（）方法
this.list.forEach(item => {
if(item.name.indexOf(keywords) != -1) {
newList.push(item)
}
})
return newList*/
return this.list.filter(item =>{ //用includes() 方法
if(item.name.includes(keywords)){
return item
}
})
}
}
});
</script>
</body>
</html>
2.成果
3.技术点
（1）添加案例方法 add（）：
add(){
// console.log('ok')
this.list.push({id:this.id,name:this.name,ctime:new Date()})
this.id = this.name = ' '
},
（2）删除案例方法 del（）：
del(id){
var index = this.list.findIndex(item =>{
if(item.id == id)
return true;
})
this.list.splice(index,1)
},
（3）搜索案例方法forEach（）和 用includes()
search(keywords){
/*var newList = [] 用forEach（）方法
this.list.forEach(item => {
if(item.name.indexOf(keywords) != -1) {
newList.push(item)
}
})
return newList*/
return this.list.filter(item =>{ //用includes() 方法
if(item.name.includes(keywords)){
return item
}
})
}
PS:
需要再次复习splice（元素1，元素2）函数的用法，用于删除或添加案例，其中元素1为删除/添加的起点，元素2为添加/删除个数必须是数字，但可以是 "0"。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
用forEach（）方法，需要遍历item中的name是否与搜索的相同，如果不同，则返回值-1，继续遍历。若相同，则返回值！=-1，重新new一个list，push进去成为新的对象显示，搜索成功。
用includes() 方法，即通过关键序号keywords进行遍历，若查询的与name相同，则直接返回该item并返回显示，搜索成功。
可以用@keyup.enter="函数（）"方法去变更按键修饰符，可根据需要将enter改为所想要的按键的ascii码即可。
<input type="text" class="form-control" v-model="name" @keyup.enter="add()"
/>
京公网安备 11010502036488号