vue實現(xiàn)商品列表的添加刪除實例講解
我們首先來看下代碼：
<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>品牌名稱</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);}}})
到此這篇關(guān)于vue實現(xiàn)商品列表的添加刪除實例講解的文章就介紹到這了,更多相關(guān)vue商品列表添加刪除內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. ASP.NET MVC使用jQuery ui的progressbar實現(xiàn)進度條2. Ajax對xml信息的接收和處理操作實例分析3. Jsp中request的3個基礎實踐4. Ajax返回值類型與用法實例分析5. python簡單實現(xiàn)9宮格圖片實例6. Java實戰(zhàn)之實現(xiàn)一個好用的MybatisPlus代碼生成器7. php根據(jù)id生成10位不重復數(shù)字跟字母混合字符串8. ASP動態(tài)include文件9. php設計模式之迭代器模式實例分析【星際爭霸游戲案例】10. Python request中文亂碼問題解決方案
網(wǎng)公網(wǎng)安備