vue的computed小案例

2024-02-06 15:36:22
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #shopTable {
            width: 500px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <table :id="ID" :border="2" :cellspacing="0">
            <tr>
                <th>序号</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>总价</th>
                <th>编辑</th>
            </tr>
            <tr v-for="(goods,index) in shopArr" :key="index">
                <td v-text="goods.id"></td>
                <td v-text="goods.type"></td>
                <td v-text="goods.price"></td>
                <!-- 数量 增加 减少 -->
                <td>
                    <button @click = "goods.count = goods.count-- <=0 ? 0:goods.count">-</button>
                    <span>{{goods.count}}</span>
                    <button  @click = "goods.count++">+</button>
                </td>
                <!-- 总价 -->
                <td v-text="(goods.count*goods.price).toFixed(2)"></td>
                <td>
                    <button @click = "del(index)" :disabled="goods.count>0">删除</button>
                </td>
            </tr>
            <!-- <template>
                <tr>
                    <th>显示</th>
                </tr>
            </template> -->

        </table>
        <p>所有商品总价为:{{totalPrice}}元</p>
    </div>
    <script src="../vue.js"></script>
    <script>
        var shopArr = [
            {
                id: 1,
                type: "篮球鞋",
                price: 1999,
                count: 1
            },
            {
                id: 2,
                type: "篮球鞋1",
                price: 1999,
                count: 1
            },
            {
                id: 3,
                type: "篮球鞋2",
                price: 1999,
                count: 1
            },
            {
                id: 4,
                type: "篮球鞋3",
                price: 1999,
                count: 1
            },
            {
                id: 5,
                type: "篮球鞋4",
                price: 1999,
                count: 1
            },
        ]
        new Vue({
            el: "#app",
            data: {
                ID: "shopTable",
                shopArr

            },
            methods: {
                del(index){
                    // 指定删除
                    this.shopArr.splice(index,1) 
                }
            },
            computed:{
                // 计算总价
                totalPrice(){
                    var allPrice = 0;
                    for(let i = 0; i < this.shopArr.length; i++){
                        //单价*数量
                        allPrice +=  this.shopArr[i].price*this.shopArr[i].count
                    }
                    return allPrice.toFixed(2)
                }
            }
        })
    </script>
</body>

</html>
码农公寓

相关文章
