<script src="vue.js"></script>

<div id="app">
    <div v-if='books.length>0'>
    <table>
      <thead>
        <tr>
          <th></th>
          <th>书籍名称</th>
          <th>出版日期</th>
          <th>价格</th>
          <th>购买数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in books">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.date}}</td>
          <!-- 方法 -->
          <!-- <td>{{getFinalPrice(item.price)}}</td> -->
          <!-- 过滤器 （优选）-->
          <td>{{item.price | showprice}}</td>
          <td>
            <button @click='decrement(index)' :disabled='item.count<=1'>-</button>{{item.count}}
            <button @click='increment(index)'>+</button></td>
            <td><button @click='remove(index)'>移除</button></td>
        </tr>
      </tbody>
    </table>
    <h2>总价格：{{totolprice | showprice}}</h2>
  </div>
  <h2 v-else>购物车为空</h2>
  </div>

const app = new Vue({
    el: '#app',
    data: {
        massage: "测试",
        books: [{
                id: 1,
                name: "《算法导论》",
                date: "2006-3",
                price: 85.00,
                count: 1
            },
            {
                id: 2,
                name: "《LUNIX编程艺术》",
                date: "2006-4",
                price: 185.00,
                count: 1
            }, {
                id: 3,
                name: "《编程珠玑》",
                date: "2006-5",
                price: 15.00,
                count: 1
            }, {
                id: 4,
                name: "《乡土中国》",
                date: "2006-6",
                price: 50.00,
                count: 1
            },
        ]
    },
    //价格保留两位解决方案一：方法；    price为参数，不确定
    methods: {
        // getFinalPrice(price) {
        //     return "¥" + price.toFixed(2)
        // }
        increment(index) {
            this.books[index].count++
        },
        decrement(index) {
            this.books[index].count--
        },
        remove(index) {
            this.books.splice(index, 1)
        }
    },
    computed: {
        totolprice() {
            //   普通的for循环
            let totolprice = 0
            for (let i = 0; i < this.books.length; i++) {
                totolprice += this.books[i].price * this.books[i].count
            }
            return totolprice


        }
    },
    //价格保留两位解决方案二：过滤器的使用
    filters: {
        showprice(price) {
            return "¥" + price.toFixed(2)
        }
    }
})

<!-- 方法 -->
 <td>{{getFinalPrice(item.price)}}</td>
 <!-- 过滤器（优选）-->
 <td>{{item.price | showprice}}</td>

//价格保留两位解决方案一：方法； price为参数，不确定
   methods: {
       getFinalPrice(price) {
           return "¥" + price.toFixed(2)
       },
    }
 //价格保留两位解决方案二：过滤器的使用
   filters: {
       showprice(price) {
           return "¥" + price.toFixed(2)
       }
   }

<div v-if='books.length>0'>
...
</div>

<h2 v-else>购物车为空</h2>

// 1：表示第二个元素开始，2：表示删除元素的个数
this.letters.splice(1,2,"我是第一个替换的","我是第二个替换的")

// 此时第二个参数传入0即表示不删除元素，便可以插入元素
  this.letters.splice(1,0,"第一个插入",'第二个插入')