介绍
主要有实现列表功能，增加和删除信息，过滤器知识点
- 实现列表功能（ v-for / v-on:click / 点击删除获取id）
<style>
.list{
border-collapse: collapse;
width: 600px;
margin: 30px auto;
}
.list th{
padding: 5px;
background-color: #0094ff;
color:#fff;
font-size: 16px;
border:1px solid #000;
}
.list td{
padding: 5px;
border:1px solid #000;
}
</style>
<script src="vue1028.js"></script>
</head>
<body>
<div id="app">
<!-- 品牌列表区域 -->
<table class="list">
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创建时间</th>
<th>操作</th>
</tr>
<tr v-for="item in list" track-by="$index">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<a href="#" @click="del(item.id)">删除</a>
</td>
</tr>
</table>
</div>
<script>
new Vue({
el:'#app',
data:{
list:[
{id:1,name:'宝马',ctime:new Date()},
{id:2,name:'奥迪',ctime:new Date()}
]
},
methods:{
del:function(id){
//将list数组中的对应的元素删除即可
alert(id);
}
}
});
</script>
- 增加
- 获取到页面上的数据，封装成list格式对象
- 添加数据到list
- 清空模型productid和productname的值
<body>
<div id="app">
<input type="text" v-model="productid" >
<input type="text" v-model="productname" >
<button @click="addProduct">添加品牌</button>
<!-- 品牌列表区域 -->
<table class="list">
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创建时间</th>
<th>操作</th>
</tr>
<tr v-for="item in list" track-by="$index">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<a href="#" @click="del(item.id)">删除</a>
</td>
</tr>
</table>
</div>
<script>
new Vue({
el:'#app',
data:{
list:[
{id:1,name:'宝马',ctime:new Date()},
{id:2,name:'奥迪',ctime:new Date()}
],
productid:0,
productname:''
},
methods:{
//1.0 删除
del:function(id){
//将list数组中的对应的元素删除即可
alert(id);
},
// 2.0 添加
addProduct:function(){
// alert(this.productid + " ,"+this.productname);
// 1.0 获取到页面上的数据
var pobj = {id:this.productid,name:this.productname,ctime:new Date()};
// 2.0 添加数据
this.list.push(pobj);
// 3.0 清空模型productid和productname的值
this.productname ='';
this.productid = 0;
}
}
});
</script>
- 删除
- 根据id删除
<td>
<a href="#" @click="del(item.id)">删除</a>
</td>
del:function(id){
//将list数组中的对应的元素删除即可
var index = this.list.findIndex(function(obj){
//返回的是判断条件,满足条件就返回id对应的index
return obj.id == id;
});
//根据索引将list数组的数据删除了，这个时候会自动调用v-for进行重新生成数据
this.list.splice(index,1);
},
- 根据index删除
<td>
<a href="javascript:void(0)" @click="del2($index)">删除</a>
</td>
del2:function(index){
this.list.splice(index,1);
},
- 过滤器
- 给一个搜索的框v-model="searchValue”
- v-for后面加过滤器
- 在data里面定义searchValue
<body>
<div id="app">
<div>
<input type="text" v-model="productid" >
<input type="text" v-model="productname" >
<button @click="addProduct">添加品牌</button>
</div>
<div>
<input type="text" v-model="searchValue">--------搜索的框
</div>
<!-- 品牌列表区域 -->
<table class="list">
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创建时间</th>
<th>操作</th>
</tr>
<tr v-for="item in list | filterBy searchValue in 'name'" track-by="$index">---用name过滤
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<a href="javascript:void(0)" @click="del2($index)">删除</a>
</td>
</tr>
</table>
</div>
<script>
new Vue({
el:'#app',
data:{
list:[
{id:1,name:'宝马',ctime:new Date()},
{id:2,name:'奥迪',ctime:new Date()}
],
productid:0,
productname:'',
searchValue:'' //代表搜索文本框中的内容,通过v-model就能够自动同步到视图中的数据
},
