跟着coderwhy老师做的vue购物车小案例

JamTin

于 2020-09-15 10:37:23 发布

阅读量799

点赞数

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_42760876/article/details/108594899

版权

本文通过跟随coderwhy老师的教程，详细介绍了如何使用Vue.js实现购物车功能，包括设置商品价格显示、数量加减、移除商品以及计算总价。通过实例展示了Vue中数据处理、过滤器、事件处理及计算属性的运用。

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

效果图：

在这里插入图片描述

学习的话肯定是一步一步敲下去，先把table的结构给写出来

<table>
    <thead>
        <tr>
            <th></th>
            <th>书籍名称</th>
            <th>出版日期</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>{
  {item.id}}</td>
            <td>{
  {item.name}}</td>
            <td>{
  {item.time}}</td>
            <td>{
  {item.price}}</td>
            <td><button >-</button>{
  {item.count}}<button>+</button></td>
            <td><button>移除</button&g