vue實現(xiàn)商品列表的添加刪除實例講解

更新時間：2020年05月14日 08:16:04 作者：奔跑的panda呀

在本篇內(nèi)容里小編給大家分享的是關于vue實現(xiàn)商品列表的添加刪除實例講解，有興趣的朋友們可以參考下。

我們首先來看下代碼：

<div id="app">
<div class="container"><form class="form-inline">
<div class="form-group"><label for="exampleInputName2">ID：</label> <input id="exampleInputName2" class="form-control" type="text" /></div>
<div class="form-group"><label for="exampleInputEmail2">Name：</label> <input class="form-control" type="text" /></div>
<button class="btn btn-primary" type="button">提交</button></form>
<table class="table table-hover table-striped">
<tbody>
<tr>
<td>ID</td>
<td>品牌名稱</td>
<td>添加時間</td>
<td>操作</td>
</tr>
<tr>
<td>{{item.id}}</td>
<td>{{item.pp_name}}</td>
<td>{{item.add_time | getTime()}}</td>
<td><a>刪除</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">// <![CDATA[
var app = new Vue({
el: '#app',
data: {
id : '',
name : '',
list : [
{id : 1, pp_name : '安踏', add_time : new Date()},
{id : 2, pp_name : '李寧', add_time : new Date()},
{id : 3, pp_name : '捷豹', add_time : new Date()},
{id : 4, pp_name : '悍馬', add_time : new Date()}
]
},
methods: {
add : function(){
// 數(shù)據(jù)插入數(shù)組操作
this.list.push({id : this.id, pp_name : this.name, add_time : new Date()});
this.id = this.name = ''
},

/* 
根據(jù)id刪除數(shù)據(jù)

分析： 先要找到這一項數(shù)據(jù)的id，然后根據(jù)id刪除索引
找到索引之后直接調(diào)用數(shù)組的splice方法
*/
del : function(id){
this.list.some((item,i) =>{
if(item.id === id){
this.list.splice(i,1);

// 在數(shù)組some中 如果返回值為true，則會立即終止后續(xù)的循環(huán)
return true;
}
})
}
},
// 時間的過濾
filters:{
getTime:function(value){
let date = new Date(value),
Y = date.getFullYear(),
m = date.getMonth() + 1,
d = date.getDate(),
h = date.getHours(),
min = date.getMinutes(),
s = date.getSeconds();
if(m<10){m = '0' +m;}
if(d<10){d = '0' +d;}
if(h<10){h = '0' +h;}
if(min<10){min = '0' +min;}
if(s<10){s = '0' +s;}

let t = Y + '-' + m + '-' + d + ' | ' + h + ':' + min + ':' + s;
return t;
}
}

})

// ]]></script>

內(nèi)容補充：

vue中注冊組件，實現(xiàn)列表的添加刪除效果

1、首先在html的<code><head>標簽中</code>導入vue.js

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2、在body中創(chuàng)建一個應用vue模板的容器

// vue起作用的區(qū)域root
<div id="root">
// input與mesg數(shù)據(jù)綁定
<input v-model="mesg" />
<button @click="handle">提交</button>
<ul>
<todo-item v-for='(item,index) in list' :key='index' :index='index' :content='item' @delete='deletes'></todo-item>
</ul>
</div>

3、在script標簽中創(chuàng)建并注冊名為todo-item的組件

Vue.component('todo-item', {
props: ['content', 'index'],
template: '<li @click="handelClick">{{content}}</li>',
methods: {
handelClick: function() {
//點擊li元素就觸發(fā)delete方法
this.$emit('delete', this.index);
}
}
})

4、在script標簽中初始化vue實例

new Vue({
el: '#root',
data() {
return {
list: [],
mesg: ''
}
},
methods: {
//點擊提交按鈕，輸入文本信息就加入列表
handle: function() {
if(this.mesg==''){
return;
}
this.list.push(this.mesg);
this.mesg = ''
},
deletes: function(index) {
alert(index)
this.list.splice(index, 1);
}
}
})

到此這篇關于vue實現(xiàn)商品列表的添加刪除實例講解的文章就介紹到這了,更多相關vue商品列表添加刪除內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！