Vue組件簡易模擬實現購物車
本文實例為大家分享了Vue組件模擬實現購物車的具體代碼，供大家參考，具體內容如下
代碼：
<!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.b3g6.com/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>單價</th> <th>數量</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>結算：</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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備