vue如何实现统计个数的绑定？

Question

请问一下。如何将页面表格中某列的数组元素统计个数？

Answer 1

table也是通过数据源生成的，直接统计数据源中的列数据信息后，在显示就好了吧。
示例如下

<div id="app">
    <table border="1">
        <tr><th>ID</th><th>类型</th><th>名称</th></tr>
        <tr v-for="item in list">
            <td>{{item.id}}</td>
            <td>{{item.type}}</td>
            <td>{{item.name}}</td>
        </tr>
        <tr>
            <td colspan="3">
               统计： <div v-for="(value,key) in summary">{{key}}数量：{{value}}</div>
            </td>
        </tr>
    </table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            summary: {},//统计信息
            list: [
                { id: 1, type: '类型3', name: '名称1' },
                { id: 2, type: '类型1', name: '名称2' },
                { id: 3, type: '类型2', name: '名称3' },
                { id: 4, type: '类型2', name: '名称4' },
                { id: 5, type: '类型2', name: '名称5' },
                { id: 6, type: '类型3', name: '名称6' },
                { id: 7, type: '类型1', name: '名称7' }
            ]
        },
        mounted() {
            var kv = {};
            this.list.forEach(item => {
                kv[item.type] = (kv[item.type] || 0) + 1;
            });
            this.summary = kv;
            console.log(kv)
        }
    })
</script>

有帮助麻烦点下【采纳该答案】，谢谢~~有其他问题可以继续交流~