购物车案例的实现

news2024/10/7 20:32:30

最终效果：

1.计算属性

用于计算最终价格，对此计算使用计算属性最佳

原理是遍历books中的每一个属性，价格*数量

      computed:{
        totalPrice()
        {
          let totalPrice=0
          // 1.普通的for循环
          // for (let i=0;i<this.books.length;i++)
          // {
          //   totalPrice+=this.books[i].count*this.books[i].price
          // }
          // return totalPrice

          // 2.1
          // for(let i in this.books)
          // {
          //   totalPrice+=this.books[i].count*this.books[i].price
          // }

          // 2.2
          // for(let i in this.books)
          // {
          //   const book=this.books[i]
          //   totalPrice+=book.count*book.price
          // }

          //3.
           for(let item of this.books)
             {
             totalPrice+=item.price*item.count
             }
        }
      },

2.过滤器

使每个出现数字的地方自动加上小数点，以及￥

一旦设置完毕，使用非常方便

      filters: {
        showPrice(price) {
          return "¥" + price.toFixed(2)
        }
      }

<h2>总价格：{{totalPrice|showPrice}}</h2>

3.v-bind

按钮动态绑定disabled属性，当数量为1时不可再减少，此时禁用减号按钮

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

4.v-if/v-else

当所有书都被移除时，显示购物车为空

即只有书的种类不为空（length>=1）时渲染元素

当为空是显示购物车为空

  <div v-if="books.length">

  <h2 v-else>购物车为空</h2>

5.v-on

当点击按钮时，书的数量变化

当点击移除时，去掉书的这一行

        <button @click="increment(index)">+</button>

      <td><button @click="removeHandler(index)">移除</button></td>

        decrement(index) {
          // console.log("decrement",index)
          this.books[index].count--
        },

        // 实现移除功能:splice
        removeHandler(index) {
          this.books.splice(index, 1)
        }

源代码：

index.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 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">
<!--      此处双层遍历，内循环遍历的是item的value而非books的value-->
<!--      <td v-for="value in item">{{value}}</td>-->
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.date}}</td>
<!--      写法2，1是直接在此拼接，不用函数-->
<!--      <td>{{getFinalPrice(item.price)}}</td>-->
<!--      写法3：过滤器-->
      <td>{{item.price | showPrice}}</td>
      <td>
<!--        当数量为1时不可再减少，使用v-bind动态绑定按钮的disable属性-->
        <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>

<!--<button disabled>禁用此按钮</button>-->
<!--在main.js前，必须先引入vue.js-->
<script src="../js/vue.js"></script>
<script src="main.js"></script>


</body>
</html>

main.js

const app=new Vue(
    {
      el: "#app",
      data: {
        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: "2008-10",
            price: 39.00,
            count: 1
          }, {
            id: 4,
            name: "代码大全",
            date: "2006-3",
            price: 128.00,
            count: 1
          },
        ],
      },
      methods: {
        //   getFinalPrice(price)
        //   {
        //     return "￥"+price.toFixed(2)
        //   }
        //因为有多个按钮，必须根据下标判断具体是哪一个
        increment(index) {
          // console.log("increment",index)
          this.books[index].count++
        },
        decrement(index) {
          // console.log("decrement",index)
          this.books[index].count--
        },

        // 实现移除功能:splice
        removeHandler(index) {
          this.books.splice(index, 1)
        }
      },
      computed:{
        totalPrice()
        {
          let totalPrice=0
          for (let i=0;i<this.books.length;i++)
          {
            totalPrice+=this.books[i].count*this.books[i].price
          }
          return totalPrice
        }
      },
      filters: {
        showPrice(price) {
          return "¥" + price.toFixed(2)
        }
      }
      }

)

style.css

table{
  border: 1px solid #e9e9e9;
  border-collapse: collapse;
  border-spacing: 0;
}

th,td{
  padding: 8px 16px;
  border: 1px solid #e9e9e9;
  text-align: left;
}

th{
  background-color: #f7f7f7;
  color: #5c6c77;
  font-weight: 600;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/30086.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！