Vue案例：购物车

原创已于 2022-04-16 08:00:46 修改 · 802 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2022-04-15 22:34:03 首次发布

Vue学习专栏收录该内容

36 篇文章

订阅专栏

本文展示了使用 Vue.js 实现的购物车功能，包括书籍信息的显示、价格计算、数量增减及商品移除。核心代码中涉及 Vue 的数据绑定、计算属性、方法及过滤器，同时还提供了完整的HTML和JavaScript代码示例，帮助读者理解Vue在实际应用中的操作。

效果展示：

核心代码如下：

 <div id="app">
    <div v-if="books.length">
      <table>
        <thead>
          <tr>
            <th></th>
            <th>书籍名称</th>
            <th>出版日期</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in books">
            <!-- <td v-for="value in item">{{value}}</td> -->
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.date}}</td>
            <!-- <td>{{getFinalPrice(item.price)}}</td> -->
            <td>{{item.price | showPrice}}</td>
            <td>
              <button @click="decrement(index)" v-bind:disabled= "item.count <= 1">-</button>
              {{item.count}}
              <button @click="increment(index)">+</button>
            </td>
            <td><button @click="removeHandler(index)">移除</button></td>    
          </tr>
        </tbody>
      </table>
      <h2>总价格:{{totalPrice | showPrice}}</h2>
    </div>
    <h2 v-else>购物车已清空!</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
  const app = new Vue({
    el:'#app',
    data:{
      isShow:true,
      books:[
        {
          id:1,
          name:'《算法导论》',
          date:'2006-9',
          price:85.00,
          count:1
        },
        {
          id:2,
          name:'《UNIX编程艺术》',
          date:'2006-2',
          price:59.00,
          count:1
        },
        {
          id:3,
          name:'《编程珠玑》',
          date:'2006-9',
          price:39.00,
          count:1
        },
        {
          id:4,
          name:'《代码大全》',
          date:'2008-10',
          price:128.00,
          count:1
        }
      ]
    },
    methods:{
      getFinalPrice(price){
        return '￥' + price.toFixed(2);
      },
      increment(index){
        this.books[index].count++;
      },
      decrement(index){   
        this.books[index].count--;
      },
      removeHandler(index){
        this.books.splice(index,1);
      }
    },
    computed:{
      totalPrice(){
        return this.books.reduce(function(preValue,book){
          return preValue + book.count * book.price
        },0)

      },

    },
    filters:{//过滤器
      showPrice(price){
        return '￥' + price.toFixed(2)
      }  
    }
  })
  </script>

免费下载连接: 购物车案例https://download.youkuaiyun.com/download/A____t/85147759?spm=1001.2014.3001.5503