Vue組件簡易模擬實(shí)現(xiàn)購物車
本文實(shí)例為大家分享了Vue組件模擬實(shí)現(xiàn)購物車的具體代碼，供大家參考，具體內(nèi)容如下
代碼：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <script src='http://m.cgvv.com.cn/bcjs/lib/vue-2.4.0.js'></script> <style> #app{ width:600px; } #myTable{ width:500px; border-collapse:collapse; } td, th{ text-align: center; font-size:20px; border:2px solid black; } td{ height: 40px; } input{ width: 30px; text-align: center } </style></head><body> <div id='app'> <my-cart></my-cart> </div> <script> var MyCommmodity = { props: ['list'], template:` <div> <button @click='baicai'>白菜</button> <button @click='qingcai'>青菜</button> <button @click='luobo'>蘿卜</button> </div> `, methods: { baicai: function(){ var cai = {}; cai.id = 4; cai.name = '白菜' cai.price = 3; cai.num = 1; this.list.push(cai) }, qingcai: function(){ var cai = {}; cai.id = 5; cai.name = '青菜' cai.price = 6; cai.num = 1; this.list.push(cai) }, luobo: function(){ var cai = {}; cai.id = 6; cai.name = '蘿卜' cai.price = 8; cai.num = 1; this.list.push(cai) } } } var MyTable = { props: ['list', 'flag'], template:` <table id='myTable'> <tr> <th>編號</th> <th>名稱</th> <th>單價(jià)</th> <th>數(shù)量</th> <th>操作</th> </tr> <tr :key='item.id' v-for='item in list'> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.price}}</td> <td> <button :disabled='flag' @click='sub(item.id)'>-</button> <input type='text' :value='item.num' @blur='changeNum(item.id,$event)'> <button @click='add(item.id)'>+</button> </td> <td> <button @click='del(item.id)'>刪除</button> </td> </tr> </table> `, methods: { changeNum: function(id, event){ this.$emit('change-num',{ id: id, type: 'change', num: event.target.value }); }, sub: function(id){ this.$emit('change-num',{ id: id, type: 'sub' }) }, add: function(id){ this.$emit('change-num',{ id: id, type: 'add' }) },del: function(id){ // alert(id); this.$emit('del-cart',id) } } } var MyPrice = { props: ['list'], template:` <div> <span>結(jié)算：</span> <span>{{total}}</span> </div> `, computed: { total: function(){ var t = 0; this.list.forEach(item => { t += item.price * item.num; }); return t; } } } Vue.component(’my-cart’, { data () { return { flag:false, list:[{ id: 1, name: '豬', price: '10', num:1, }, { id: 2, name: '牛', price: '11', num:1, }, { id: 3, name: '雞', price: '13', num:1, }] } }, template:` <div> <my-commmodity :list='list'></my-commmodity> <my-table :list='list' :flag='flag' @change-num='changeNum($event)' @del-cart='delCart($event)'></my-table> <my-price :list='list'></my-price> </div> `, components:{ ’my-table’:MyTable, ’my-price’:MyPrice, ’my-commmodity’:MyCommmodity, }, methods:{ changeNum: function(val){ if(val.type ==='change'){ this.list.some(item=>{ if(item.id == val.id){item.num = val.num;return true; } }); }else if(val.type ==='sub'){ this.list.some(item=>{ if(item.id == val.id && item.num >0){item.num -= 1;return true; } }); }else if(val.type ==='add'){ this.list.some(item=>{ if(item.id == val.id){item.num += 1;return true; } }); } }, delCart: function(id){ var index = this.list.findIndex(item=>{ return item.id == id; }) this.list.splice(index,1) } } }) var vm = new Vue({ el: ’#app’, data:{ } }) </script></body></html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. XML在語音合成中的應(yīng)用2. jscript與vbscript 操作XML元素屬性的代碼3. 不要在HTML中濫用div4. HTML5實(shí)戰(zhàn)與剖析之觸摸事件(touchstart、touchmove和touchend)5. .NET Framework各版本(.NET2.0 3.0 3.5 4.0)區(qū)別6. ASP基礎(chǔ)入門第四篇(腳本變量、函數(shù)、過程和條件語句)7. ASP將數(shù)字轉(zhuǎn)中文數(shù)字(大寫金額)的函數(shù)8. XML入門的常見問題(三)9. php使用正則驗(yàn)證密碼字段的復(fù)雜強(qiáng)度原理詳細(xì)講解 原創(chuàng)10. HTTP協(xié)議常用的請求頭和響應(yīng)頭響應(yīng)詳解說明（學(xué)習(xí)）
網(wǎng)公網(wǎng)安備