网站规划的意义,网站备案中的网站名称,自己建网站开网店,著名办公空间设计公司水果购物车业务 需求说明 渲染功能删除功能修改功能全选反选功能统计 选中的 总价 和 总数量持久化到本地 业务技术点总结#xff1a; 渲染功能#xff1a; v-if/v-else v-for :class删除功能#xff1a; 点击传参 filter过滤覆盖原数组修改个数#xff1a; 点击传参 find找…水果购物车业务 需求说明 渲染功能删除功能修改功能全选反选功能统计 选中的 总价 和 总数量持久化到本地 业务技术点总结 渲染功能 v-if/v-else v-for :class删除功能 点击传参 filter过滤覆盖原数组修改个数 点击传参 find找对象全选反选计算属性computed 完整写法 get/set总价和总数量 计算属性 computed reduce条件求和持久化到本地 watch监视localStorageJSON.stringify存 JSON.parse读取 代码示例 scritp
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: false,num: 3,price: 40,},{id: 4,icon: http://autumnfish.cn/static/鸭梨.png,isChecked: true,num: 10,price: 3,},{id: 5,icon: http://autumnfish.cn/static/樱桃.png,isChecked: false,num: 20,price: 34,},]const app new Vue({el: #app,data: {// 水果列表fruitList: JSON.parse(localStorage.getItem(list)) || defaultArr,},computed: {// 计算属性默认只能获取需要设置需要写完整写法isAll: {// 所有的小选框的选中状态全选才选中get() {return this.fruitList.every(item item.isChecked)},set(value) {// 基于拿到的value布尔值要让所有的小选框 同步状态this.fruitList.forEach(item item.isChecked value)},},// 统计选中的总数 reducetotalCount() {return this.fruitList.reduce((sum, item) {if (item.isChecked) {// 选中 需要累加return sum item.num} else {// 没选中 不需要累加 返回sum即可return sum}}, 0)},// 统计选中的总价totalPrice() {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)},reduce(id) {// 1. 根据id 找到数组中的对应项const fruit this.fruitList.find(item item.id id)// 2. 操作 num 数量fruit.num--},add(id) {// 1. 根据id 找到数组中的对应项const fruit this.fruitList.find(item item.id id)// 2. 操作 num 数量fruit.num}},// 监视器监视所有数据是否发生变化watch: {fruitList: {deep: true,handler (newValue) {// 需要将变化后的 newValue 存入本地 存进去前需要转 JSONlocalStorage.setItem(list,JSON.stringify(newValue))}}}})/script 当前购物车业务除了没有使用axios与服务器存储交互以及支付功能。其他的都使用到了。
