Question

所以我有一个填充数据的表，这是代码：

<tr v-for="user in users" :key="user.id">
   <td>{{user.id}}</td>
   <td>{{user.name | upFirstLetter}}</td>
   <td>{{user.email | upFirstLetter}}</td>
   <td>{{user.role | upFirstLetter}}</td> -- Basically user role has two types (Admin, Customer)
<tr/>

我的问题是，它填充了所有用户，但我希望它仅向用户显示“客户”角色。我仍在学习Vue，请先谢谢。

Answer 1

如Vue documentation中所述，您可以将v-for与v-if结合使用，因此在第一行添加v-if子句：

<tr v-for="user in users" :key="user.id" v-if="user.role == 'Customer'">

编辑：在文档it is pointed out中，您应该计算“客户”用户列表，然后遍历该列表

Answer 2

如果即使用户角色不是客户也要显示行，则可以在td元素中使用条件。如果您还有其他重要的列要显示而不是根本不显示该行，这将很有用。不要忘记添加带有td元素的v-else，以便在一行中提供相同数量的td元素。

<td v-if="user.role="customer">{{user.role | upFirstLetter}}</td>
<td v-else>/<td>

填充数据时如何在Vue JS中添加条件？

2 个答案: