2.过滤器

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

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

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

总价格：{{totalPrice|showPrice}}

3.v-bind

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

        -

4.v-if/v-else

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

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

当为空是显示购物车为空

  
购物车为空

5.v-on 

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

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

        +

      移除

        decrement(index) {// console.log("decrement",index)this.books[index].count--},// 实现移除功能:spliceremoveHandler(index) {this.books.splice(index, 1)}

源代码：

 index.html

{value}}-->{getFinalPrice(item.price)}}-->

书籍名称
出版日期
价格
购买数量
操作


{{item.id}}
{{item.name}}
{{item.date}}

{{item.price | showPrice}}

-{{item.count}}+
移除
总价格：{{totalPrice|showPrice}}
购物车为空

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--},// 实现移除功能:spliceremoveHandler(index) {this.books.splice(index, 1)}},computed:{totalPrice(){let totalPrice=0for (let i=0;i

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;
}