vue 第八天 小结 作业模拟购物车

vue 第八天 小结 作业模拟购物车

<div id="vue_one">
    <table>
        <tr>
            <th>书籍名称</th>
            <th>出版日期</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>
        </tr>
        <tr v-for="(item,index) in book">
            <th>{{item.name}}</th>
            <th>{{item.time}}</th>
            <th>￥{{item.price}}</th>
            <th>
                <button @click="item.counts >1 ? item.counts-- : item.counts">-</button>
                {{item.counts}}
                <button @click="item.counts++">+</button>
            </th>
            <th>
                <button @click="delete1(index)">移除</button>
            </th>
        </tr>
    </table>
  总价格：{{sum1}}
    <font v-for="item in qwe">{{item}}</font>
</div>
<script type="text/javascript">
    const vm = new Vue({
        el: '#vue_one',
        data: {
            counts: 0,
            book: [
                {
                    name: "java从入门到入土",
                    time: "2016-4",
                    price: 15.00,
                    counts: 1
                },
                {
                    name: "php找不到理由学习",
                    time: "2012-4",
                    price: 53.00,
                    counts: 1
                },
                {
                    name: "编程是什么",
                    time: "2008-10",
                    price: 54.00,
                    counts: 1

                },
                {
                    name: "编程大全",
                    time: "2014-3",
                    price: 322.00,
                    counts: 1
                }
            ]
        },
        methods: {
            delete1(index) {
                this.book.splice(index, 1);
            }
        },
        computed: {
            sum1() {
                let cc = 0;
                for (let b in this.book) {
                    cc += this.book[b].counts * this.book[b].price
                }
                return cc;
            }
        }
    })
</script>