Vue 購(gòu)物車案例練習(xí)

更新時(shí)間：2021年10月27日 08:42:05 作者：Silent丿丶黑羽

這篇文章主要給大家分享關(guān)于Vue 購(gòu)物車案例的小練習(xí)，文章個(gè)悲劇購(gòu)物車為標(biāo)題需求利用HTML代碼實(shí)現(xiàn)整個(gè)過(guò)程,需要的朋友可以參考一下文章的具體內(nèi)容

1.購(gòu)物車案例

經(jīng)過(guò)一系列的學(xué)習(xí)，我們這里來(lái)練習(xí)一個(gè)購(gòu)物車的案例

需求：使用vue寫一個(gè)表單頁(yè)面，頁(yè)面上有購(gòu)買的數(shù)量，點(diǎn)擊按鈕+或者-，可以增加或減少購(gòu)物車的數(shù)量，數(shù)量最少不得少于0，點(diǎn)擊移除按鈕，會(huì)移除該商品，當(dāng)把所有的商品移除后，頁(yè)面上的表單消失，

然后出現(xiàn)文字：購(gòu)物車為空，表單下方是商品的總價(jià)格，隨著商品的數(shù)量增加而增加，默認(rèn)是0元，

總體效果如下：

2.代碼實(shí)現(xiàn)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../js/vue.js"></script>
  <style>
    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: #5c6b77;
        font-weight: 600;
    }
  </style>
</head>
<body>
<div id="app">
  <div v-if="books.length">
    <table>
      <thread>
        <tr>
          <th></th>
          <th>書籍名稱</th>
          <th>出版日期</th>
          <th>價(jià)格</th>
          <th>購(gòu)買數(shù)量</th>
          <th>操作</th>
        </tr>
      </thread>
      <tbody>
      <tr v-for="(book, index) in books" :key="book">
        <td>{{index+1}}</td>
        <td>{{book.name}}</td>
        <td>{{book.publish_date}}</td>
        <td>{{book.price | showPrice}}</td>
        <td>
          <button @click="decrease(index)" :disabled="book.count <= 0">-</button>
          {{book.count}}
          <button @click="increase(index)">+</button>
        </td>
        <td>
          <button @click="removeClick(index)">移除</button>
        </td>
      </tr>
      </tbody>
    </table>
    <p>總價(jià)：{{totalPrice | showPrice}}</p>
  </div>
  <h2 v-else>購(gòu)物車為空</h2>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      books: [
        {"name":"算法導(dǎo)論", "publish_date":"2006-9", "price":20.00, "count": 0},
        {"name":"UNIX編程藝術(shù)", "publish_date":"2006-2", "price":30.00, "count": 0},
        {"name":"編程技術(shù)", "publish_date":"2008-10", "price":40.00, "count": 0},
        {"name":"代碼大全", "publish_date":"2006-3", "price":50.00, "count": 0},
      ],
    },
    methods: {
      // 增加+
      decrease(index){
        this.books[index].count-=1
      },
      // 減少-
      increase(index){
        this.books[index].count+=1
      },
      // 移除按鈕
      removeClick(index){
        this.books.splice(index, 1)
      }
    },
    computed: {
      // 計(jì)算總價(jià)格
      totalPrice(){
        let totalPrice = 0
        for (let item of this.books){
          totalPrice += item.price * item.count
        }
        return totalPrice
      }
    },
    // 過(guò)濾器，將價(jià)格過(guò)濾成有2位小數(shù)的
    filters: {
      showPrice(price){
        return '￥' + price.toFixed(2)
      }
    }
  })
</script>
</body>
</html>

3.總結(jié)

v-for：循環(huán)，循環(huán)books列表
v-on：事件監(jiān)聽(tīng)，監(jiān)聽(tīng)點(diǎn)擊事件
disabled：按鈕是否可以點(diǎn)擊的屬性，為True可點(diǎn)擊，為False不可點(diǎn)擊，增加判斷條件:disabled="book.count <= 0"當(dāng)購(gòu)物車數(shù)量≤0，則無(wú)法點(diǎn)擊
v-if和v-else：條件判斷，判斷books的列表長(zhǎng)度，如果有長(zhǎng)度展示列表，如果長(zhǎng)度為0則展示文字購(gòu)物車為空
filters：自定義過(guò)濾器，過(guò)濾價(jià)格，使本身的價(jià)格過(guò)濾后帶有2位小數(shù)
computed：計(jì)算屬性，計(jì)算購(gòu)物的總價(jià)格