VUE书籍购物案例

最新推荐文章于 2023-07-29 11:18:12 发布

Signify2019

最新推荐文章于 2023-07-29 11:18:12 发布

阅读量357

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_52973261/article/details/120689610

版权

本文详细介绍了如何使用Vue.js实现书籍购物车功能，包括点击按钮动态增减商品数量、限制商品数量不能为负数、删除书籍信息以及计算并显示购物车总价。通过动态绑定类和计算属性来优化代码，确保购物车操作的正确性和用户体验。

摘要由CSDN通过智能技术生成

VUE书籍购物案例

调用increment和decrement方法时，并不能实现点击哪个按钮就实现哪个按钮的++或者–操作，所以需要传入index
在这里插入图片描述
获得了index之后，选中books数组里的第几个对象，再进行count属性的修改，就可以实现

实现啦~~

1.但是有个小问题，就是这个–按钮可以一直减下去，减到为负数，但是一般书籍数量不能为负数
所以我们使用v-bind：动态绑定一个类，当它bool值为true的时候就加上这个类，当它bool值为false的时候就失去这个类

<button @click="decrement(index)" v-bind:disabled="item.count<= 1">-</button>

2.**删除这行书籍信息**
html代码

<button @click=“removeHandle”>移除

js代码

removeHandle(index){
this.books.splice(index,1)
}


3.**如何显示总价以及计算总价**
当books有长度的时候才显示这个div，而h2刚好在这个div里面，所以当books都删除掉的时候，长度为0，所以就不显示这个h2
![在这里插入图片描述](https://img-blog.csdnimg.cn/8258dc2540a0489290c906fc564bcff2.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAQ29sb3JhdGlvbi4=,size_16,color_FFFFFF,t_70,g_se,x_16)否则就v-else输出购物车为空

4.**最后做 总价  的部分**
最好是用计算属性来做，方法命名最好是用名词，遍历最好用let不要用var

总价格:{{totalPrice}}

```

 computed: {
    totalPrice(){
      let totalPrice = 0;  //使用变量之前先声明它！！
      for(let i = 0; i < this.books.length;i++){
        totalPrice += this.books[i].price * this.books[i].count;
      }
      return totalPrice;
    }
  },

最后的结果~
在这里插入图片描述
html代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div id="app">
  <!--当有长度的时候才显示这个div-->
  <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="increment(index)">+</button>
          {{item.count}}
          <button @click="decrement(index)" v-bind:disabled="item.count<= 1">-</button>
        </td>
        <td>
          <button @click="removeHandle">移除</button>
        </td>
      </tr>
      </tbody>
    </table>
    <h2>总价格:{{totalPrice}}</h2>
  </div>
  <h2 v-else>购物车为空</h2>
</div>

<script src="../js/vue.js"></script>
<script src="main.js"></script>
</body>
</html>

js代码

const app = new Vue({
  el: '#app',
  data: {
    books: [
      {
        id: 1,
        name: '《算法导论》',
        date: '2006-9',
        price: 85.00,
        count: 1
      },
      {
        id: 2,
        name: '《算法导论》',
        date: '2006-9',
        price: 99.00,
        count: 3
      },
      {
        id: 3,
        name: '《书2号》',
        date: '2006-9',
        price: 39.00,
        count: 2
      },
      {
        id: 4,
        name: '《书3号》',
        date: '2006-9',
        price: 46.00,
        count: 2
      }
    ]
  },
  methods: {/*
    getFinalPrice(price){
      return '￥' + price.toFixed(2)
    }*/
    increment(index){
      this.books[index].count++;
    },
    decrement(index) {
      this.books[index].count--;
    },
    removeHandle(index){
      this.books.splice(index,1)
    }
  },
  computed: {
    totalPrice(){
      let totalPrice = 0;  //使用变量之前先声明它！！
      for(let i = 0; i < this.books.length;i++){
        totalPrice += this.books[i].price * this.books[i].count;
      }
      return totalPrice;
    }
  },
  filters: {
    showPrice(price) {
      return '￥' + price.toFixed(2)
    }
  }
})