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='https://www.haobala.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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
1. SpringBoot2整合Ehcache组件实现轻量级缓存管理2. Django def clean()函数对表单中的数据进行验证操作3. django中嵌套的try-except实例4. 浅谈vue实现双向事件绑定v-model的原理5. Android WebView通过动态的修改js去拦截post请求参数实例6. Admin - SpringBoot + Maven 多启动环境配置实例详解7. 如何用python写个模板引擎8. SpringBoot 启动方法run()源码解析9. spring boot集成mongodb的增删改查的示例代码10. Django结合使用Scrapy爬取数据入库的方法示例
网公网安备