Vue计算属性computed使用场景

置顶我是全栈架构师

已于 2023-08-22 09:24:26 修改

阅读量1.7k

点赞数 2

分类专栏： vuejs 文章标签： vue

于 2019-12-11 16:18:19 首次发布

本文链接：https://blog.csdn.net/mxj588love/article/details/103494701

版权

vuejs 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Computed属性购物差演示</title>
    <!--<script src="vue.js"></script>-->
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
    <p>
        <button @click="add">添加商品</button>
    </p>
    <table border="1">
        <tr>
            <th>商品名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>操作</th>
        </tr>
        <tr v-for="(item,index) in shopingCarts">
            <td><input v-model="item.goodsName"/></td>
            <td><input v-model="item.price"/></td>
            <td><input v-model="item.quantity"/></td>
            <td>
                <button @click="remove(index)">删除</button>
            </td>
        </tr>
    </table>
    <p>
    <h3>总价: {{totalPrice}} 元</h3></p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            shopingCarts: [
                {goodsName: '', price: '', quantity: ''}
            ]
        },
        computed: {
            totalPrice: function () {
                let total = 0;
                this.shopingCarts.forEach(function (item, index) {
                    let subtotal = item.price * item.quantity;
                    total += subtotal;
                });
                return total;
            }
        },
        methods: {
            add: function () {
                this.shopingCarts.push({goodsName: '', price: '', quantity: ''});
            },
            remove: function (index) {
                this.shopingCarts.splice(index, 1);
            }
        }

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