master

分支 (1)

管理

管理

master

vue
/
computed.html

<!DOCTYPE html>
<html>
<head>
    <title>计算属性</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <table>
            <tr>
                <td>名字</td>
                <td>数量</td>
            </tr>
            <tr v-for="(item, index) in list" :key="item.id">
                <td>{{ item.name }}</td>
                <td>{{ item.num }}</td>
            </tr>
            <tr>
                <td colspan="2">总计：{{ totalCount }}</td>
            </tr>
        </table>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                list: [
                    {id: 1, name: "篮球", num: 1},
                    {id: 2, name: "足球", num: 4},
                    {id: 3, name: "排球", num: 5},
                ]
            },
            // computed有缓存，页面上用了5次，实际只算了一次
            computed: {
                totalCount() {
                    let total = this.list.reduce((sum, item) => sum + item.num, 0)
                    return total;
                }
            }
        })
    </script>
</body>
</html>