Vue制作购物车（完整版，附带详细代码讲解）

2024-07-04 18:11| 来源: 网络整理| 查看: 265

详细代码加注释

每日一句

详细代码加注释全选序号商品名单价数量小计 {{ food.checked }} {{ i + 1 }} {{ food.name }} ¥{{ food.price }} - {{ food.count }} + ¥{{ food.price * food.count }} 总价格: ¥{{ getTotal }} export default { // 事件触发的方法: methods methods: { // 如果事件在调用时,没写(), 则默认的参数1 是事件参数 checkAll(e) { console.log(e.target.checked) //查看 checked 属性 // 读取全选框的值, 赋值给每个商品的checked属性 this.foods.forEach( food => (food.checked = e.target.checked) ) }, }, computed: { //判断是否全选: 每一个的checked都是true isCheckAll() { return this.foods.every(food => food.checked) }, getTotal() { // reduce: 让数组元素合并出一个值 var a = this.foods.reduce((sum, food) => { const { price, count, checked } = food // *true 相当于 *1 // *false 相当于 *0 = 0 // 没有勾选, 就是 sum + 0, 即不累加 return sum + price * count * checked }, 0) return a }, }, data() { return { foods: [ { name: '茶碗蒸蛋', price: 9, count: 1, checked: true }, { name: '小笼包', price: 12, count: 4, checked: false }, { name: '豆腐脑', price: 6, count: 10, checked: true }, { name: '豆浆', price: 4, count: 1, checked: false }, { name: '油条', price: 2, count: 7, checked: true }, ], } }, } table { border-collapse: collapse; thead { background-color: #eee; } td { padding: 10px 20px; border: 1px solid gray; span { display: inline-block; width: 40px; text-align: center; } } } 每日一句

"人不知而不愠，不亦君子乎？"

"如果我有了某些成就，别人并不理解，可我决不会感到气愤、委屈。这不也是一种君子风度的表现吗？"

【本文地址】

公司简介

联系我们