<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>

<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="(item,index) in books">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.data}}</td>
                <td>{{item.price|getp}}</td><!-- 使用了过滤器-->
                <td>
                    <button @click="decreasement(index)" :disabled="item.count<=0">-</button>
                    {{item.count}}
                    <button @click="increasment(index)">+</button>
                </td>
                <td><button @click="remove(index)">移除</button></td>
            </tr>
            </tbody>
        </table>
        <h2>总价格:{{totalPrice|getp}}</h2>
    </div>
    <h2 v-else>购物车为空</h2>
</div>
<script src="vue.js"></script>
<script src="main.js"></script>
</body>
</html>


table{
    border: 1px;
    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 ;
}



const app=new Vue({
    el:'#app',
    data:{
        books:[{
            id:1,
            name:"算法导论",
            data: '2006-1',
            price:39.00,
            count:1
        },{
            id:2,
            name:"算法导论",
            data: '2006-1',
            price:39.00,
            count:1
        },{
            id:3,
            name:"算法导论",
            data: '2006-1',
            price:39.00,
            count:1
        },{
            id:4,
            name:"算法导论",
            data: '2006-1',
            price:39.00,
            count:1
        }]
    },
    methods:{
        getfinalprice(price){
            return "$"+price.toFixed(2);
        },
        decreasement(index){
            this.books[index].count--;
        },
        increasment(index){
            this.books[index].count++;
        },
        remove(index){
            this.books.splice(index,1);
        }
    },
    filters:{
        getp(price){
            return "$"+price.toFixed(2);
        }
    },
    computed:{
        totalPrice(){
            let result=0;
            for (let i=0;i<this.books.length;i++){
                result+=this.books[i].price*this.books[i].count;
            }
            return result;
        }
    }
})