Vue組件簡易模擬實現(xiàn)購物車
本文實例為大家分享了Vue組件模擬實現(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.lshqa.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>單價</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. Java GZip 基于內(nèi)存實現(xiàn)壓縮和解壓的方法2. idea配置jdk的操作方法3. SpringBoot+TestNG單元測試的實現(xiàn)4. IntelliJ IDEA設(shè)置默認(rèn)瀏覽器的方法5. python 浮點數(shù)四舍五入需要注意的地方6. Springboot 全局日期格式化處理的實現(xiàn)7. VMware中如何安裝Ubuntu8. Docker容器如何更新打包并上傳到阿里云9. 完美解決vue 中多個echarts圖表自適應(yīng)的問題10. JAMon(Java Application Monitor)備忘記
網(wǎng)公網(wǎng)安備