案例要求：

1.表格中的数据不是写死的数据，要能随取随用

2.点击+或者-按钮购买数量能有相应变化，且不能为负数

3.能计算出总的价格

4.删除某个物品后前面序号相应发生改变

 

相应代码如下：

在引用代码前一定要引入vue.js，即第6行代码要进行修改

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车案例</title>
    <script src = "../js/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        table {
            border-collapse: collapse;
            padding: 0;
        }
        #app  th {
            width: 120px;
            height: 30px;
            text-align: center;
            background-color: #ccc;
            border: 1px solid white;
        }
        tbody {
            text-align: center;
        }
        td {
            border: 1px solid #cccccc;
        }
        #sum,#sub {
            width: 20px
        }
        .price {
            display: inline-block;
            width: 600px;
            text-align: right;
        }
    </style>
</head>
<body>
<!--html代码-->
<div id = 'app'>
    <div v-if = 'tablebody.length'>
        <table >
            <thead>
            <tr>
                <th v-for = 'm in tablehead'>{{m}}</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for = '(ibook,index) in tablebody'>
                <td >{{ibook.id}}</td>
                <td >{{ibook.bookname}}</td>
                <td >{{ibook.eachprice | showprice}}</td>
                <td >
                    <button id = 'sum' :disabled='ibook.buynum <=1' @click="sub(index)">-</button>
                    {{ibook.buynum}}
                    <button id = 'sub' @click="sum(index)">+</button>
                </td>
                <td>
                    <button @click="removeGoods(index)">删除</button>
                </td>
            </tr>
            </tbody>
        </table>
        <h2 class = 'price'>总价格：{{FinalPrice | showprice}}</h2>
    </div>
    <h2 class = 'price' v-else>购物车为空</h2>
</div>

<!--vue.js代码-->
<script>
    const app = new Vue({
        el: "#app",
        data: {
            tablehead: ['','书籍名称','价格','购买数量','操作'],
            tablebody: [
                {
                    id: 1,
                    bookname: '格林童话',
                    eachprice: 26.00,
                    buynum: 1
                },
                {
                    id: 2,
                    bookname: '男人装',
                    eachprice: 58.00,
                    buynum: 1
                },
                {
                    id: 3,
                    bookname: '意林',
                    eachprice: 36.50,
                    buynum: 1
                },
                {
                    id: 4,
                    bookname: '英汉字典',
                    eachprice: 88.80,
                    buynum: 1
                }
            ],
        },
        computed:{
            FinalPrice (){
                let FinPRI = 0;
                for(let i = 0;i < this.tablebody.length; i ++) {
                    FinPRI += this.tablebody[i].eachprice*this.tablebody[i].buynum;
                };
                return FinPRI;
            },
        },
        methods:{
            sum (index){
                this.tablebody[index].buynum ++;
            },
            sub (index){
                this.tablebody[index].buynum --;
            },
            removeGoods(index){
                this.tablebody.splice(index,1);
                for (let i = 0;i < this.tablebody.length;i++){
                    if (i >= index){
                        this.tablebody[i].id = i +1;
                    }
                }
            }
        },
        filters:{
            showprice(eachprice){
                return '$'+ eachprice.toFixed(2)
            }
        }

    })
</script>
</body>
</html>