介紹
主要有實現列表功能，增加和刪除信息，過濾器知識點
- 實現列表功能（ 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就能夠自動同步到視圖中的數據
},
