• Vue(9)购物车练习


    购物车案例

    经过一系列的学习,我们这里来练习一个购物车的案例

      需求:使用vue写一个表单页面,页面上有购买的数量,点击按钮+或者-,可以增加或减少购物车的数量,数量最少不得少于0,点击移除按钮,会移除该商品,当把所有的商品移除后,页面上的表单消失,然后出现文字:购物车为空,表单下方是商品的总价格,随着商品的数量增加而增加,默认是0元,总体效果如下:

     

    代码实现

    <!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>价格</th>
              <th>购买数量</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>总价:{{totalPrice | showPrice}}</p>
      </div>
      <h2 v-else>购物车为空</h2>
    </div>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          books: [
            {"name":"算法导论", "publish_date":"2006-9", "price":20.00, "count": 0},
            {"name":"UNIX编程艺术", "publish_date":"2006-2", "price":30.00, "count": 0},
            {"name":"编程技术", "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: {
          // 计算总价格
          totalPrice(){
            let totalPrice = 0
            for (let item of this.books){
              totalPrice += item.price * item.count
            }
            return totalPrice
          }
        },
        // 过滤器,将价格过滤成有2位小数的
        filters: {
          showPrice(price){
            return '¥' + price.toFixed(2)
          }
        }
      })
    </script>
    </body>
    </html>
    

    以上就是全部代码,当中使用到了很多知识点

    • v-for:循环,循环books列表
    • v-on:事件监听,监听点击事件
    • disabled:按钮是否可以点击的属性,为True可点击,为False不可点击,增加判断条件:disabled="book.count <= 0"当购物车数量≤0,则无法点击
    • v-ifv-else:条件判断,判断books的列表长度,如果有长度展示列表,如果长度为0则展示文字购物车为空
    • filters:自定义过滤器,过滤价格,使本身的价格过滤后带有2位小数
    • computed:计算属性,计算购物的总价格
  • 相关阅读:
    [WordPress]配置Wordpress
    [磁盘数据分析] 实现解析特定分区体系(DOS分区体系)的主引导记录扇区
    [FZOJ2150]Fire Game 技巧BFS
    [HDOJ1028]Ignatius and the Princess III (母函数)
    [POJ3281]Dining 最大流(建图奇葩)
    [POJ1273]Drainage Ditches 网络流(最大流)
    HDU 5416
    hdu 3853 概率dp
    POJ 3071 概率DP
    HDU 5000 2014 ACM/ICPC Asia Regional Anshan Online DP
  • 原文地址:https://www.cnblogs.com/jiakecong/p/14953288.html
Copyright © 2020-2023  润新知