Vue 中利用 template标签遍历多维数组

作者：高玉涵
时间：2022.7.20 10:06
博客：blog.csdn.net/cg_i

1. 需求

 将商品列表 list 一个二维数组来实现商品的分类，比如可分为“电子产品”“生活用品”和“果蔬”，同类商品聚合在一起（例图 1-1）。

2. 二维数组内容

 JavaScript 不支持真正的多维数组，但可以用数组的数组来近式。

 list:[
    [{
        id:1,
        name:'iPhone7',
        price:6188,
        count:1,
        checked:true,
    },
    {
        id:2,
        name:'iPad Pro',
        price:5888,
        count:1,
        checked:true,
    },
    {
        id:3,
        name:'MacBookPro',
        price:21488,
        count:1,
        checked:true,
    }],
    [{
        id:4,
        name:'西瓜',
        price:18,
        count:1,
        checked:true,
    },
    {
        id:5,
        name:'苹果',
        price:18,
        count:1,
        checked:true,
    }]
],

3. 列表渲染指令 v-for

 Vue.js 的指令是带有特殊前缀”v-“的 HTML 特性，它绑定一个表达示，并将一些特性应用到 DOM 上。当需要将一个数组遍历或枚举一个对象循环显示时，就会用到列表渲染指令 v-for。它的表达式结合 in 来使用，类似 item in items 的形式。初看需求想达到例图1样式，你可能首先想到直接用 v-for 对表格 tr、td 进行循环（但不要用这种方式，因为结果会让你哭）。

 <!-- 错误示范：只用于展示 -->
 <tr v-for="items in list"> <!-- 错误1：只会绘制出两行 -->
    <td v-for="value in items">
        {{ value.name }} <!-- 错误2：遍历输出特定值 -->
        <!-- 错误3：非法，不允许在表格里绘制表格 -->
        <td>{{ value.price }}</td>
    </td>
    <!-- 错误4：非法，value 不存在 -->
    <td>{{ value.price }}</td>
</tr>

4. template 标签

 Vue.js 中 template 标签的作用是模板点位符，可帮助我们包裹元素，但在循环过程中 template 标签不会被渲染到页面上。

5. 正确的做法

<template v-for="itmes in list">
    <tr v-for="(value) in itmes">
        <td>{{ value.id }}</td>
        <td>{{ value.name }}</td>
        <td>{{ value.price }}</td>
        <td>
            <button>-</button>
            {{ value.count }}
            <button>+</button>
        </td>
        <td><button>移除</button></td>
    </tr>
</template>