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

╰+哭是因爲堅強的太久メ 2022-11-05 00:46 92阅读 0赞

# 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>