<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">
</label>
<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>
<!-- <tr v-for="item in list" :key="item.id"> -->
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{item.id}}</td>
<td >{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div> <script>
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(){
var car = {id: this.id, name: this.name, ctime: new Date()}
this.list.push(car)
this.id = this.name = ''
},
// splice用法： splice 粘接，胶接。 也就是去掉一部分，用其他东西替代拼接
// arr.splice(2,0,"William"); 第二个值 0，直接在index=2的地方插入新的值，没有删除旧的元素。
// George,John,Thomas,James,Adrew,Martin
// George,John,William,Thomas,James,Adrew,Martin del(id){
// 数组的some(); 方法。 findIndex(); 方法类似，功能更单一，专门查找索引。
this.list.some((item, i) => { if(item.id == id){
this.list.splice(i, 1); // some(); 在数组里找符合条件的，return true 会立即终止这个数组的后续循环。
return true;
};
});
},
search(keywords){ // 方法一：
var newList = []; this.list.forEach(item => {
// indexOf(); 检索字符串里是否包含关键字，包含则范围index值，不包含返回 -1. // console.log('曾经我也想过一了百了'.indexOf(''));
// indexOf('') 返回值是 0 （搜索框空白，不是空格。）
// 只要不是 -1，值都会被push到数组里。 所以搜索栏还没输关键字的时候，显示了默认的数据。 if(item.name.indexOf(keywords) != -1){
newList.push(item)
};
}); return newList; // 方法二： // var newList = this.list.filter(item=>{
return this.list.filter(item=>{ // filter(); 遍历数组，返回符合条件的新数组。 // if(item.name.indexOf(keywords) != -1){}
if(item.name.includes(keywords)){
return item;
};
});
// return newList; 先用中间变量var = newList接收，再return 这里改写成直接return
},
},
});
</script>
</body>