基于组件的案例：购物车
生活随笔
收集整理的這篇文章主要介紹了
基于组件的案例：购物车
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
基于組件的案例：購物車?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">.container {}.container .cart {width: 300px;margin: auto;}.container .title {background-color: lightblue;height: 40px;line-height: 40px;text-align: center;/*color: #fff;*/ }.container .total {background-color: #FFCE46;height: 50px;line-height: 50px;text-align: right;}.container .total button {margin: 0 10px;background-color: #DC4C40;height: 35px;width: 80px;border: 0;}.container .total span {color: red;font-weight: bold;}.container .item {height: 55px;line-height: 55px;position: relative;border-top: 1px solid #ADD8E6;}.container .item img {width: 45px;height: 45px;margin: 5px;}.container .item .name {position: absolute;width: 90px;top: 0;left: 55px;font-size: 16px;}.container .item .change {width: 100px;position: absolute;top: 0;right: 50px;}.container .item .change a {font-size: 20px;width: 30px;text-decoration:none;background-color: lightgray;vertical-align: middle;}.container .item .change .num {width: 40px;height: 25px;}.container .item .del {position: absolute;top: 0;right: 0px;width: 40px;text-align: center;font-size: 40px;cursor: pointer;color: red;}.container .item .del:hover {background-color: orange;}</style> </head> <body><div id="app"><div class="container"><my-cart></my-cart></div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">var CartTitle = {props: ['uname'],template: `<div class="title">{{uname}}的商品</div>`}var CartList = {props: ['list'],template: `<div><div :key='item.id' v-for='item in list' class="item"><img :src="item.img"/><div class="name">{{item.name}}</div><div class="change"><a href="" @click.prevent='sub(item.id)'>－</a><input type="text" class="num" :value='item.num' @blur='changeNum(item.id, $event)'/><a href="" @click.prevent='add(item.id)'>＋</a></div><div class="del" @click='del(item.id)'>×</div></div></div>`,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){// 把id傳遞給父組件this.$emit('cart-del', id);}}}var CartTotal = {props: ['list'],template: `<div class="total"><span>總價：{{total}}</span><button>結算</button></div>`,computed: {total: function() {// 計算商品的總價var t = 0;this.list.forEach(item => {t += item.price * item.num;});return t;}}}Vue.component('my-cart',{data: function() {return {uname: '張三',list: [{id: 1,name: 'TCL彩電',price: 1000,num: 1,img: 'img/a.jpg'},{id: 2,name: '機頂盒',price: 1000,num: 1,img: 'img/b.jpg'},{id: 3,name: '海爾冰箱',price: 1000,num: 1,img: 'img/c.jpg'},{id: 4,name: '小米手機',price: 1000,num: 1,img: 'img/d.jpg'},{id: 5,name: 'PPTV電視',price: 1000,num: 2,img: 'img/e.jpg'}]}},template: `<div class='cart'><cart-title :uname='uname'></cart-title><cart-list :list='list' @change-num='changeNum($event)' @cart-del='delCart($event)'></cart-list><cart-total :list='list'></cart-total></div>`,components: {'cart-title': CartTitle,'cart-list': CartList,'cart-total': CartTotal},methods: {changeNum: function(val) {// 分為三種情況：輸入域變更、加號變更、減號變更if(val.type=='change') {// 根據子組件傳遞過來的數據，跟新list中對應的數據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 -= 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) {// 根據id刪除list中對應的數據// 1、找到id所對應數據的索引var index = this.list.findIndex(item=>{return item.id == id;});// 2、根據索引刪除對應數據this.list.splice(index, 1);}}});var vm = new Vue({el: '#app',data: {}});</script> </body> </html>
總結
以上是生活随笔為你收集整理的基于组件的案例：购物车的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 组件间数据交互——组件插槽的作用||具名
- 下一篇： 前后端交互概述与URL地址格式