vue實(shí)現(xiàn)商品列表的添加刪除實(shí)例講解
我們首先來(lái)看下代碼：
<div id='app'><div class='container'><form class='form-inline'><div class='form-group'><label for='exampleInputName2'>ID：</label> <input type='text' /></div><div class='form-group'><label for='exampleInputEmail2'>Name：</label> <input type='text' /></div><button type='button'>提交</button></form><table class='table table-hover table-striped'><tbody><tr><td>ID</td><td>品牌名稱(chēng)</td><td>添加時(shí)間</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ù)分析： 先要找到這一項(xiàng)數(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，則會(huì)立即終止后續(xù)的循環(huán)return true;}})}},// 時(shí)間的過(guò)濾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)容補(bǔ)充：
vue中注冊(cè)組件，實(shí)現(xiàn)列表的添加刪除效果
1、首先在html的<code><head>標(biāo)簽中</code>導(dǎo)入vue.js
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
2、在body中創(chuàng)建一個(gè)應(yī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標(biāo)簽中創(chuàng)建并注冊(cè)名為todo-item的組件
Vue.component(’todo-item’, {props: [’content’, ’index’],template: ’<li @click='handelClick'>{{content}}</li>’,methods: {handelClick: function() {//點(diǎn)擊li元素就觸發(fā)delete方法this.$emit(’delete’, this.index);}}})
4、在script標(biāo)簽中初始化vue實(shí)例
new Vue({el: ’#root’,data() {return {list: [],mesg: ’’}},methods: {//點(diǎn)擊提交按鈕，輸入文本信息就加入列表handle: function() {if(this.mesg==’’){return;}this.list.push(this.mesg);this.mesg = ’’},deletes: function(index) {alert(index)this.list.splice(index, 1);}}})
到此這篇關(guān)于vue實(shí)現(xiàn)商品列表的添加刪除實(shí)例講解的文章就介紹到這了,更多相關(guān)vue商品列表添加刪除內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. CSS3實(shí)例分享之多重背景的實(shí)現(xiàn)(Multiple backgrounds)2. XML入門(mén)的常見(jiàn)問(wèn)題(四)3. vue實(shí)現(xiàn)復(fù)制文字復(fù)制圖片實(shí)例詳解4. XML基本概念XPath、XSLT與XQuery函數(shù)介紹5. 前端html+css實(shí)現(xiàn)動(dòng)態(tài)生日快樂(lè)代碼6. 關(guān)于html嵌入xml數(shù)據(jù)島如何穿過(guò)樹(shù)形結(jié)構(gòu)關(guān)系的問(wèn)題7. WML的簡(jiǎn)單例子及編輯、測(cè)試方法第1/2頁(yè)8. 不要在HTML中濫用div9. el-input無(wú)法輸入的問(wèn)題和表單驗(yàn)證失敗問(wèn)題解決10. XML入門(mén)的常見(jiàn)問(wèn)題(三)
網(wǎng)公網(wǎng)安備