ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

【Vue学习笔记_08】案例-图书购物车 (filters过滤器)

2021-11-27 12:00:53  阅读:169  来源: 互联网

标签:count Vue 08 购物车 book books filters totalPrice price


【Vue学习笔记_08】案例-图书购物车

这个案例结合了前面介绍的很多知识点,Mustache语法、v-if、v-else、v-for、v-bind、v-on、computed等等,以及新增知识点filters。

配套可执行代码示例 => GitHub

效果展示

在这里插入图片描述

filters

filters:过滤器,和methods、computed是并列的,有点像函数,接受参数并返回值,一般用于对数据进行一些格式转换或过滤处理操作。

filters使用格式:变量|过滤器

在下面这个例子中,过滤器showPrice实现把传入的totalPrice转换为¥格式并保留两位小数。

<h4>总价格:{{totalPrice | showPrice}}</h4>
<script>
  const app = new Vue({
    el: '#app',
    filters: {
      showPrice(price) {
        return '¥' + price.toFixed(2)
      }
    },
    computed: {
      totalPrice() {
        ...
        return totalPrice
      }
    }
  })
</script>

代码

index.html

<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="(book,index) in books">
        <td>{{book.id}}</td>
        <td>{{book.name}}</td>
        <td>{{book.date}}</td>
        <!--<td>{{getFinalPrice(book.price)}}</td>-->
        <td>{{book.price | showPrice}}</td>
        <td><button @click="decrement(index)" v-bind:disabled="book.count <= 1">-</button>{{book.count}}<button @click="increment(index)">+</button></td>
        <td><button @click="removeHandle(index)">移除</button></td>
      </tr>
      </tbody>
    </table>
    <h4>总价格:{{totalPrice | showPrice}}</h4>
  </div>
  <h3 v-else>购物车为空</h3>
</div>

main.js

const app = new Vue({
  el: '#app',
  data: {
    books: [
      {
        id: 1,
        name: '算法导论',
        date: '2006-9',
        price: 85,
        count: 1
      },
      {
        id: 2,
        name: 'UNIX编程艺术',
        date: '2006-2',
        price: 59,
        count: 1
      },
      {
        id: 3,
        name: '编程珠玑',
        date: '2008-10',
        price: 39,
        count: 1
      }
    ]
  },
  methods: {
    getFinalPrice(price) {
      return '¥' + price.toFixed(2)
    },
    decrement(index) {
      this.books[index].count--
    },
    increment(index) {
      this.books[index].count++
    },
    removeHandle(index) {
      this.books.splice(index, 1)
    }
  },
  //过滤器
  filters: {
    showPrice(price) {
      return '¥' + price.toFixed(2)
    }
  },
  computed: {
    totalPrice() {
      //ES6数组遍历语法
      let totalPrice = 0
      for (let book of this.books) {
        totalPrice += book.price * book.count
      }
      return totalPrice
      //JS数组高阶函数
      return this.books.reduce(function (preValue, book) {
        return preValue + book.price * book.count
      }, 0)
    }
  }
})

计算totalPrice的时候使用了ES6数组遍历语法和JS数组高阶函数两种方式,更详细的介绍可以看这两篇笔记:

技巧总结

  1. v-if="books.length":当books数组为空时,不显示购物车table
  2. <tr v-for="(book,index) in books">:v-for循环生成table的每一行
  3. <button v-bind:disabled="book.count <= 1">-</button>:当一本书的count<=1时,减少按钮disabled,即不能再减少

标签:count,Vue,08,购物车,book,books,filters,totalPrice,price
来源: https://blog.csdn.net/weixin_44752429/article/details/121574051

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有