介紹
主要有實(shí)現(xiàn)列表功能，增加和刪除信息，過濾器知識(shí)點(diǎn)
- 實(shí)現(xiàn)列表功能（ v-for / v-on:click / 點(diǎn)擊刪除獲取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">
<!-- 品牌列表區(qū)域 -->
<table class="list">
<tr>
<th>編號(hào)</th>
<th>品牌名稱</th>
<th>創(chuàng)建時(shí)間</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數(shù)組中的對(duì)應(yīng)的元素刪除即可
alert(id);
}
}
});
</script>
- 增加
- 獲取到頁面上的數(shù)據(jù)，封裝成list格式對(duì)象
- 添加數(shù)據(jù)到list
- 清空模型productid和productname的值
<body>
<div id="app">
<input type="text" v-model="productid" >
<input type="text" v-model="productname" >
<button @click="addProduct">添加品牌</button>
<!-- 品牌列表區(qū)域 -->
<table class="list">
<tr>
<th>編號(hào)</th>
<th>品牌名稱</th>
<th>創(chuàng)建時(shí)間</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數(shù)組中的對(duì)應(yīng)的元素刪除即可
alert(id);
},
// 2.0 添加
addProduct:function(){
// alert(this.productid + " ,"+this.productname);
// 1.0 獲取到頁面上的數(shù)據(jù)
var pobj = {id:this.productid,name:this.productname,ctime:new Date()};
// 2.0 添加數(shù)據(jù)
this.list.push(pobj);
// 3.0 清空模型productid和productname的值
this.productname ='';
this.productid = 0;
}
}
});
</script>
- 刪除
- 根據(jù)id刪除
<td>
<a href="#" @click="del(item.id)">刪除</a>
</td>
del:function(id){
//將list數(shù)組中的對(duì)應(yīng)的元素刪除即可
var index = this.list.findIndex(function(obj){
//返回的是判斷條件,滿足條件就返回id對(duì)應(yīng)的index
return obj.id == id;
});
//根據(jù)索引將list數(shù)組的數(shù)據(jù)刪除了，這個(gè)時(shí)候會(huì)自動(dòng)調(diào)用v-for進(jìn)行重新生成數(shù)據(jù)
this.list.splice(index,1);
},
- 根據(jù)index刪除
<td>
<a href="javascript:void(0)" @click="del2($index)">刪除</a>
</td>
del2:function(index){
this.list.splice(index,1);
},
- 過濾器
- 給一個(gè)搜索的框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>
<!-- 品牌列表區(qū)域 -->
<table class="list">
<tr>
<th>編號(hào)</th>
<th>品牌名稱</th>
<th>創(chuàng)建時(shí)間</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:'' //代表搜索文本框中的內(nèi)容,通過v-model就能夠自動(dòng)同步到視圖中的數(shù)據(jù)
},
