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，則會立即終止后續的循環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中創建一個應用vue模板的容器
// vue起作用的區域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標簽中創建并注冊名為todo-item的組件
Vue.component(’todo-item’, {props: [’content’, ’index’],template: ’<li @click='handelClick'>{{content}}</li>’,methods: {handelClick: function() {//點擊li元素就觸發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商品列表添加刪除內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
相關文章：
網公網安備