vue--综合练习（品牌列表渲染）
需求
- 数据渲染
- 添加数据
- 删除数据
- 数据过滤
界面
代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>品牌列表渲染</title>
<script src="https://cdn.bootcss.com/vue/2.6.8/vue.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">
</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">
</label>
<label>
Color:
<input type="text" class="form-control" v-model="color">
</label>
<input type="button" value="添加" class="btn btn-primary" @click="add">
<label>
关键字搜索(color,name)：
<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>Color</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 v-text='item.id'></td>
<td v-text='item.name' ></td>
<td v-text='item.color' ></td>
<td v-text='item.ctime'></td>
<td> <a href="#" @click.prevent="del(item.id)">删除</a> </td>
</tr>
</tbody>
</table>
</div>
<script>
let vm=new Vue({
el:"#app",
data:{
id:"",
name:"",
color:"",
keywords:"",
list:[
{
id:"1",
name:"奔驰",
color:"white",
ctime:new Date()
},{
id:"2",
name:"宝马",
color:"white",
ctime:new Date()
},{
id:"3",
name:"福特",
color:"red",
ctime:new Date()
}
]
},
methods:{
add(){
this.list.push({"id":this.id,"name":this.name,"color":this.color,"ctime":new Date()})
this.id=""; this.name="";this.color="";
},
del(id){
if(confirm("确定删除吗？")){
//根据Id删除数据，并确定对应索引，调用数组的splice方法删除
this.list.forEach((item,i)=>{
if(item.id==id){
this.list.splice(i,1);
}
})
}
},
search(keywords){
//关键词过滤
return this.list.filter((item)=>{
if(item.name.includes(keywords)||item.color.includes(keywords)){
return item;
}
})
}
}
})
</script>
</body>
</html>
