网站建设与建设,最新新闻热点图片,深圳企业倒闭,广告设计公司哪家好综合案例-购物车
需求说明: 1. 渲染功能 v-if/v-else v-for :class 2. 删除功能 点击传参 filter过滤覆盖原数组 3. 修改个数 点击传参 find找对象 4. 全选反选 计算属性computed 完整写法 get/set 5. 统计 选中的 总价 和 数量 计算属性conputed reduce条件求和 6. 持久化到本… 综合案例-购物车
需求说明: 1. 渲染功能 v-if/v-else v-for :class 2. 删除功能 点击传参 filter过滤覆盖原数组 3. 修改个数 点击传参 find找对象 4. 全选反选 计算属性computed 完整写法 get/set 5. 统计 选中的 总价 和 数量 计算属性conputed reduce条件求和 6. 持久化到本地 watch监听,localStorage, JSON.stringfiy, JSON.parse
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.active {background-color: azure;}/style/headbodydiv idapp!-- 顶部banner --divimg/div!-- 面包屑 --div/div!-- 购物车主体 --div v-iffruitList.length 0div!-- 头部 --divdiv/div/div!-- 身体 --divdiv v-for(item,index) in fruitList :keyitem.id :class{active:item.isChecked}divinput typecheckbox v-modelitem.isChecked/divdivimg width100px height50px :srcitem.icon/divdiv{{item.price}}/divdivdiv!-- :disabled: 禁用 --button :disableditem.num1 clicksub(item.id)-/buttonspan{{item.num}}/spanbutton clickadd(item.id)/button/div/divdiv{{ item.num * item.price }}/divdivbutton clickdel(item.id)删除/button/div/div/div/div!-- 底部 --div!-- 全选 --labelinput typecheckbox v-modelisAll全选/labeldiv!-- 所有商品总价 --span总价:{{totalPrice}} /span!-- 结算按钮 --button结算({{totalCount}})/button/div/div/div!-- 空车 --div v-else空空如也/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/scriptscript srchttps://unpkg.com/axios/dist/axios.min.js/scriptscript// 购物车的默认值const defaultArr [{id: 1,icon: http://autumnfish.cn/static/火龙果.png,isChecked: true,num: 2,price: 6}, {id: 2,icon: http://autumnfish.cn/static/荔枝.png,isChecked: false,num: 7,price: 20}, {id: 3,icon: http://autumnfish.cn/static/榴莲.png,isChecked: true,num: 10,price: 50},]const app new Vue({el: #app,data: {// 水果列表,从本地缓存读取,|| []: 初始值,一般都是空数组fruitList: JSON.parse(localStorage.getItem(list)) || defaultArr,},computed: {// 默认计算属性:只能获取不能设置,要设置需要写完整的写法// isAll(){// // 必须所有的小选框都选中,全选按钮才选中 - every// return this.fruitList.every(item item.isChecked true)// }// 完整写法 get setisAll:{get(){return this.fruitList.every(item item.isChecked true)},set(value){// 基于拿到的布尔值,要让所有的小选框,同步状态this.fruitList.forEach(item item.isChecked value)}},// 统计选中的总数 reducetotalCount(){return this.fruitList.reduce((sum,item) {if (item.isChecked){// 选中 - 需要累加return sum item.num}else{// 没选中 - 不需要累加return sum}},0)},// 统计选中的总价 num * pricetotalPrice(){return this.fruitList.reduce((sum,item) {if (item.isChecked){return sum item.num * item.price}else{return sum}},0)}},methods: {del(id) {this.fruitList this.fruitList.filter(item item.id ! id)},sub(id) {// 1. 根据ID找到数组中的对应项 - findconst fruit this.fruitList.find(item item.id id)//2. 操作 num 数量fruit.num--},add(id) {// 1. 根据ID找到数组中的对应项 - findconst fruit this.fruitList.find(item item.id id)//2. 操作 num 数量fruit.num}},// 缓存到本地watch:{fruitList:{deep: true,handler(newValue){// 需要将变化后的 newValue 存入本地 (转json)localStorage.setItem(list,JSON.stringify(newValue))}}}})/script/body/html
