vue實(shí)現(xiàn)商品列表的添加刪除實(shí)例講解
我們首先來看下代碼：
<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ù)分析： 先要找到這一項(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，則會立即終止后續(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)容補(bǔ)充：
vue中注冊組件，實(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)建一個應(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)建并注冊名為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)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. Idea如何去除Mapper警告方法解析2. IntelliJ IDEA設(shè)置編碼格式的方法3. idea設(shè)置自動導(dǎo)入依賴的方法步驟4. ASP基礎(chǔ)入門第八篇（ASP內(nèi)建對象Application和Session）5. 使用 kind 和 Docker 啟動本地的 Kubernetes環(huán)境6. XML入門精解之結(jié)構(gòu)與語法7. IntelliJ IDEA設(shè)置默認(rèn)瀏覽器的方法8. idea重置默認(rèn)配置的方法步驟9. idea自定義快捷鍵的方法步驟10. idea設(shè)置代碼格式化的方法步驟
網(wǎng)公網(wǎng)安備