Vue计算属性computed使用场景

<!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>
  • 使用场景,某个属性的值需要来自多个属性的简单计算或者复杂逻辑计算得出的值时, 推荐使用computed属性, 比如文中这个totalPrice属性。

Vue计算属性computed使用场景_第1张图片

你可能感兴趣的:(vuejs)