时间:2021-07-01 10:21:17 帮助过:11人阅读
本文实例为大家分享了Vue在购物车场景下的应用,供大家参考,具体内容如下
购物车场景需求:
1. 商品、店铺、购物车的选择
2. 商品删除
关键代码
测试数据
- var _list = [{
- checked: false,
- goods: [{
- name: "商品1",
- price: 23,
- checked: false
- }]
- }, {
- checked: false,
- goods: [{
- name: "商品2",
- price: 20,
- checked: false
- }, {
- name: "商品3",
- price: 30,
- checked: false
- }]
- }];
店铺对象组成购物车数组 _list
商品对象组成店铺对象下的商品数组 goods
每个商品和店铺都有自己的 checked 字段
一. 选择商品
数据绑定
- <body class="app">
- <input type="checkbox" v-if="list.length" v-model="checkedAll">
- <div v-for="(shopI, shop) in list" class="shop">
- <input type="checkbox" v-model="shop.checked">
- <div v-for="(goodI, good) in shop.goods" class="good">
- <input type="checkbox" v-model="good.checked">
- <span v-html="good.name"></span>
- <span v-html="good.age"></span>
- </div>
- </div>
- </body>
- var vue = new Vue({
- el: '.app',
- data: {
- list: _list
- }
- });
监听购物车全选
- computed: {
- checkedAll: function() {
- return this.checkedShopsCount == this.list.length;
- },
- checkedShopsCount: function() {
- var i = 0;
- this.list.forEach(function(item) {
- if (item.checked == true) i++;
- });
- return i;
- }
- }
当店铺选择数(checkedShopsCount)等于店铺数(list.length)时,购物车全选(checkedAll)为 true
商品 & 店铺选择事件
- <input type="checkbox" v-if="list.length" v-model="checkedAll" @change="setAllChecked($event)">
- <div v-for="(shopI, shop) in list">
- <input type="checkbox" v-model="shop.checked" @change="setGoodChecked(shop)">
- <div v-for="(goodI, good) in shop.goods">
- <input type="checkbox" v-model="good.checked" @change="setShopChecked(good, shop)">
- <span v-html="good.name"></span>
- <span v-html="good.age"></span>
- </div>
- </div>
- methods: {
- setAllChecked: function(e) {
- this.list.forEach(function(shop) {
- shop.checked = e.target.checked;
- shop.goods.forEach(function(good) {
- good.checked = e.target.checked;
- });
- });
- },
- setGoodChecked: function(shop) {
- shop.goods.forEach(function(good) {
- good.checked = shop.checked;
- });
- },
- setShopChecked: function(good, shop) {
- if (!good.checked) {
- shop.checked = false;
- } else {
- // 检查店铺是否存在 checked 为 false 的商品
- shop.checked = !shop.goods.find(function(good) {
- return !good.checked;
- });
- }
- }
- }
选择购物车时执行 setAllChecked,此时选择所有商品和店铺
选择店铺时执行 setGoodChecked,此时选择该店铺下所有商品
选择商品时执行 setShopChecked
当商品 checked 为 false 时,取消选择当前店铺
当商品 checked 为 true 时,判断当前店铺是否选择了所有商品,是则选择当前店铺,否则取消选择当前店铺
二、删除商品
- <input type="button" value="删除" @click="deleteGood(shop,goodI,list,shopI)">
- methods: {
- deleteGood: function(shop,goodI,list,shopI) {
- shop.goods.splice(goodI, 1);
- if (shop.goods.length==0) {
- list.splice(shopI, 1);
- }
- }
- }
全部代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>我的购物车</title>
- <script src="vue.min.js"></script>
- </head>
- <body class="app">
- <input type="checkbox" v-if="list.length" v-model="checkedAll" @change="setAllChecked($event)">
- <div v-for="(shopI, shop) in list">
- <input type="checkbox" v-model="shop.checked" @change="setGoodChecked(shop)">
- <div v-for="(goodI, good) in shop.goods">
- <input type="checkbox" v-model="good.checked" @change="setShopChecked(good, shop)">
- <span v-html="good.name"></span>
- <span v-html="good.age"></span>
- <input type="button" value="删除" @click="deleteGood(shop,goodI,list,shopI)">
- </div>
- </div>
- </body>
- <script>
- var _list = [{
- checked: false,
- goods: [{
- name: "商品1",
- money: 23,
- checked: false
- }]
- }, {
- checked: false,
- goods: [{
- name: "商品2",
- money: 20,
- checked: false
- }, {
- name: "商品3",
- money: 30,
- checked: false
- }]
- }];
- var vue = new Vue({
- el: '.app',
- data: {
- list: _list
- },
- computed: {
- checkedAll: function() {
- return this.checkedShopsCount == this.list.length;
- },
- checkedShopsCount: function() {
- var i = 0;
- this.list.forEach(function(item) {
- if (item.checked == true) i++;
- });
- return i;
- }
- },
- methods: {
- setGoodChecked: function(shop) {
- shop.goods.forEach(function(good) {
- good.checked = shop.checked;
- });
- },
- setShopChecked: function(good, shop) {
- if (!good.checked) {
- shop.checked = false;
- } else {
- shop.checked = !shop.goods.find(function(good) {
- return !good.checked;
- });
- }
- },
- setAllChecked: function(e) {
- this.list.forEach(function(shop) {
- shop.checked = e.target.checked;
- shop.goods.forEach(function(good) {
- good.checked = e.target.checked;
- });
- });
- },
- deleteGood: function(shop, goodI, list, shopI) {
- shop.goods.splice(goodI, 1);
- if (shop.goods.length == 0) {
- list.splice(shopI, 1);
- }
- }
- }
- });
- </script>
- </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。