Vuejs组件模板：如何使用v-for循环遍历特定的数组键

Question

这是我的组件模板的样子：

<tr v-for="row in user.data">

                    <td v-for="(value,key) in row">

                        {{key}}-{{value}}

                    </td>
</tr>

我想从这个循环中排除一些键，我知道最好的解决方案是使用计算函数，但不知道如何实现它。

Answer 1

您可以创建一个要忽略的键数组：

data: function () {
        return {
            ignore: [
             'key1',
             'key2',
             'key3'
            ]

然后添加将循环通过“ignore”数组的v-if语句，并在密钥匹配时跳过输出：

  <td v-for="(value,key) in row"
      v-if="!ignore.includes(row.key)">

                    {{key}}-{{value}}

  </td>