filters 过滤器

    1. filters: {
    2.   showPrice(price) {
    3.     return '¥' + price.toFixed(2)//保留2位小数
    4.   }
    5. }

    image.png

    • index.html ```html <!DOCTYPE html>

      书籍名称 出版日期 价格 购买数量 操作
      {{item.id}} {{item.name}} {{item.date}} {{item.price | showPrice}} {{item.count}}

      总价格: {{totalPrice | showPrice}}

      购物车为空

    2. - main.js
    3. ```javascript
    4. const app = new Vue({
    5.   el: '#app',
    6.   data: {
    7.     books: [
    8.       {
    9.         id: 1,
    10.         name: '《算法导论》',
    11.         date: '2006-9',
    12.         price: 85.00,
    13.         count: 1
    14.       },
    15.       {
    16.         id: 2,
    17.         name: '《UNIX编程艺术》',
    18.         date: '2006-2',
    19.         price: 59.00,
    20.         count: 1
    21.       },
    22.       {
    23.         id: 3,
    24.         name: '《编程珠玑》',
    25.         date: '2008-10',
    26.         price: 39.00,
    27.         count: 1
    28.       },
    29.       {
    30.         id: 4,
    31.         name: '《代码大全》',
    32.         date: '2006-3',
    33.         price: 128.00,
    34.         count: 1
    35.       },
    36.     ]
    37.   },
    38.   methods: {
    39.     // getFinalPrice(price) {
    40.     //   return '¥' + price.toFixed(2)
    41.     // }
    42.     increment(index) {
    43.       this.books[index].count++
    44.     },
    45.     decrement(index) {
    46.       this.books[index].count--
    47.     },
    48.     removeHandle(index) {
    49.       this.books.splice(index, 1)
    50.     }
    51.   },
    52.   computed: {
    53.     totalPrice() {
    54.       let totalPrice = 0
    55.       for (let i = 0; i < this.books.length; i++) {
    56.         totalPrice += this.books[i].price * this.books[i].count
    57.       }
    58.       return totalPrice
    60.       // for (let i in/of this.books)
    61.       // reduce
    62.     }
    63.   },
    64.   filters: {
    65.     showPrice(price) {
    66.       return '¥' + price.toFixed(2)
    67.     }
    68.   }
    69. })
    • style.css ```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: #5c6b77; font-weight: 600; } ```