Vue计算属性computed使用场景

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Computed属性购物差演示</title><script type="tex

文鼎鼎

3196人浏览 · 2020-06-29 11:31:15

文鼎鼎 · 2020-06-29 11:31:15 发布

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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^