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>
搜索名稱關(guān)鍵字：
<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.技術(shù)點(diǎn)
（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:
????需要再次復(fù)習(xí)splice（元素1籽暇，元素2）函數(shù)的用法温治，用于刪除或添加案例，其中元素1為刪除/添加的起點(diǎn)戒悠，元素2為添加/刪除個(gè)數(shù)必須是數(shù)字熬荆，但可以是 "0"。如果未規(guī)定此參數(shù)绸狐，則刪除從 index 開始到原數(shù)組結(jié)尾的所有元素卤恳。?
????用forEach（）方法，需要遍歷item中的name是否與搜索的相同寒矿，如果不同突琳，則返回值-1，繼續(xù)遍歷符相。若相同拆融，則返回值！=-1啊终，重新new一個(gè)list镜豹，push進(jìn)去成為新的對(duì)象顯示，搜索成功蓝牲。
? ? 用includes() 方法趟脂，即通過關(guān)鍵序號(hào)keywords進(jìn)行遍歷，若查詢的與name相同例衍，則直接返回該item并返回顯示昔期，搜索成功已卸。
? ? 可以用@keyup.enter="函數(shù)（）"方法去變更按鍵修飾符，可根據(jù)需要將enter改為所想要的按鍵的ascii碼即可镇眷。
????<input type="text" class="form-control" v-model="name" @keyup.enter="add()"
/>
