Vue购物车案例（初学版）

最新推荐文章于 2022-03-15 15:35:42 发布

boboj1

最新推荐文章于 2022-03-15 15:35:42 发布

阅读量381

点赞数 2

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/Wind_AN/article/details/118439906

版权

Vue 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何使用Vue.js框架构建一个初级版本的购物车应用。通过实例代码讲解了Vue组件化思想，以及如何处理数据绑定和事件监听，实现商品的增删及数量修改功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>购物车</title>
  <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
</head>
<body>
  <div id="app">
    <div v-if="contents.length">
      <table class="layui-table" lay-size="lg">
        <thead>
          <tr>
            <th></th>
            <th>书籍名称</th>
            <th>出版日期</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(values,index) in contents">
            <td>{{values.id}}</td>
            <td>{{values.name}}</td>
            <td>{{values.date}}</td>
            <td>{{values.price | formatPrice}}</td>
            <td>
              <button @click="sub(index)" class="layui-btn" :disabled="values.count <= 1">-</button>
              <span>{{values.count}}</span>
              <button @click="add(index)" class="layui-btn">+</button>
            </td>
            <td>
              <button class="layui-btn layui-btn-radius layui-btn-danger" @click="removeHandle(index)">移除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <h1 v-else>
      购物车为空
    </h1>
    <div>
      总价格：<span>{{totalPrice | formatPrice}}</span>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        contents: [
          {id: 1,name: '《算法导论》',date: '2006-9',price: 85,count: 1},
          {id: 2,name: '《UNIX编程艺术》',date: '2006-2',price: 59,count: 1},
          {id: 3,name: '《编程珠玑》',date: '2008-10',price: 39,count: 1},
          {id: 4,name: '《代码大全》',date: '2006-3',price: 128,count: 1},
        ]
      },
      methods: {
        add(index) {//增加购物车项目数量
          this.contents[index].count ++
        },
        sub(index) {//减少购物车项目数量
          this.contents[index].count --
        },
        removeHandle(index) {//删除购物车项目
          this.contents.splice(index,1)
        }
      },
      computed: {
        totalPrice() {//购物车总价格
          return this.contents.reduce(function(pre,n) {
            return pre + n.count * n.price
          },0)
        }
      },
      filters: {
        formatPrice(price) {
          return '￥' + price.toFixed(2)
        }
      }
    })
  </script>
</body>
</html>