vue實現商品列表的添加刪除實例講解
我們首先來看下代碼：
<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(){// 數據插入數組操作this.list.push({id : this.id, pp_name : this.name, add_time : new Date()});this.id = this.name = ’’},/* 根據id刪除數據分析： 先要找到這一項數據的id，然后根據id刪除索引找到索引之后直接調用數組的splice方法*/del : function(id){this.list.some((item,i) =>{if(item.id === id){this.list.splice(i,1);// 在數組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>
內容補充：
vue中注冊組件，實現列表的添加刪除效果
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數據綁定<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實現商品列表的添加刪除實例講解的文章就介紹到這了,更多相關vue商品列表添加刪除內容請搜索好吧啦網以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
相關文章：
網公網安備