Vue-品牌列表案例
2018-12-17 本文已影响0人
小鱼儿_逆流而上
首先祝大家 双12 购物快乐哦，我自己也淘了不少宝贝，哈哈哈~~~
今天给大家展示一个基于上一章知识的一个小案例，其中包含了很多小的知识点，在此分享给大家☺
品牌列表的添加、删除、搜索
<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>
<!-- 之前，v-for中的数据，都是直接从data上的list中直接渲染出来的 -->
<!-- 现在，我们自定义了一个search方法，同时，把所有的关键字，通过传参的形式，传递给了search方法 -->
<!-- 在search方法内部，通过执行for循环，把所有符合搜索关键字的数据，保存到一个新数组中，返回 -->
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{ item.id }}</td>
<td v-text="item.name"></td>
<td>{{item.ctime}}</td>
<td>
<a href="#" @click="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(){
this.list.push({id:this.id,name:this.name,ctime:new Date()});
this.id = this.name = ''
},
del(id){
// 方法一、
// this.list.some((item,i)=>{
// if(item.id == id){
// this.list.splice(i, 1)
// // 在数组的 some 方法中，如果return true，就会立即终止这个数组的后续循环
// return true;
// }
// })
// 方法二、
var index = this.list.findIndex(item => {
if(item.id == id){
return true;
}
})
this.list.splice(index,1)
},
search(keywords){
// var newList = []
// this.list.forEach(item => {
// if(item.name.indexOf(keywords)!=-1){
// newList.push(item)
// }
// })
// return newList
return this.list.filter(item => {
// ES6中,为字符串提供了一个新方法，叫做 String.prototype.includes('要包含的字符串')
// 如果包含，则返回true，否则返回false
// contains选择器方法也可进行过滤
if(item.name.includes(keywords)){
return item
}
})
}
}
})
</script>
</body>
