v-if 条件渲染分组

因为 v-if 是一个指令,所以必须将它添加到一个元素上。但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

 注意,v-show 不支持 <template> 元素,也不支持 v-else

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据您的需求,可以将前端渲染分为以下步骤: 1. 在前端创建五个表格:L1、L2V、L2B、L2C、LP。 2. 后端返回数据是一个 List,我们可以通过循环遍历这个 List 中的实体,然后根据 qualLv 字段的值将实体渲染到对应的表格中。 3. 定义一个 computed 属性,用于将 List 中的实体按照 qualLv 分组,即将 qualLv 相同的实体放到同一个数组中。 4. 在 Vue 中使用 v-for 指令循环遍历每个分组,然后在每个分组中再次使用 v-for 指令遍历该分组中的每个实体,并将实体的字段渲染到对应的表格中。 5. 如果某个表格中没有数据,则需要在该表格中显示一个空行或者其他占位符,保证该表格的存在。 下面是一份示例代码,供您参考: ```html <template> <div> <!-- L1 表格 --> <table> <thead> <tr> <th>Training Start Date</th> <th>Training End Date</th> <th>Course Name</th> </tr> </thead> <tbody> <tr v-for="item in L1" :key="item.id"> <td>{{ item.trainingStartDate }}</td> <td>{{ item.trainingEndDate }}</td> <td>{{ item.courseName }}</td> </tr> <!-- 如果 L1 表格中没有数据,则显示一个空行 --> <tr v-if="L1.length === 0"> <td colspan="3"> </td> </tr> </tbody> </table> <!-- L2V 表格 --> <table> <thead> <tr> <th>Training Start Date</th> <th>Training End Date</th> <th>Course Name</th> </tr> </thead> <tbody> <tr v-for="item in L2V" :key="item.id"> <td>{{ item.trainingStartDate }}</td> <td>{{ item.trainingEndDate }}</td> <td>{{ item.courseName }}</td> </tr> <!-- 如果 L2V 表格中没有数据,则显示一个空行 --> <tr v-if="L2V.length === 0"> <td colspan="3"> </td> </tr> </tbody> </table> <!-- L2B 表格 --> <table> <thead> <tr> <th>Training Start Date</th> <th>Training End Date</th> <th>Course Name</th> </tr> </thead> <tbody> <tr v-for="item in L2B" :key="item.id"> <td>{{ item.trainingStartDate }}</td> <td>{{ item.trainingEndDate }}</td> <td>{{ item.courseName }}</td> </tr> <!-- 如果 L2B 表格中没有数据,则显示一个空行 --> <tr v-if="L2B.length === 0"> <td colspan="3"> </td> </tr> </tbody> </table> <!-- L2C 表格 --> <table> <thead> <tr> <th>Training Start Date</th> <th>Training End Date</th> <th>Course Name</th> </tr> </thead> <tbody> <tr v-for="item in L2C" :key="item.id"> <td>{{ item.trainingStartDate }}</td> <td>{{ item.trainingEndDate }}</td> <td>{{ item.courseName }}</td> </tr> <!-- 如果 L2C 表格中没有数据,则显示一个空行 --> <tr v-if="L2C.length === 0"> <td colspan="3"> </td> </tr> </tbody> </table> <!-- LP 表格 --> <table> <thead> <tr> <th>Training Start Date</th> <th>Training End Date</th> <th>Course Name</th> </tr> </thead> <tbody> <tr v-for="item in LP" :key="item.id"> <td>{{ item.trainingStartDate }}</td> <td>{{ item.trainingEndDate }}</td> <td>{{ item.courseName }}</td> </tr> <!-- 如果 LP 表格中没有数据,则显示一个空行 --> <tr v-if="LP.length === 0"> <td colspan="3"> </td> </tr> </tbody> </table> </div> </template> <script> export default { data() { return { dataList: [], }; }, computed: { L1() { return this.dataList.filter((item) => item.qualLv === "L1"); }, L2V() { return this.dataList.filter((item) => item.qualLv === "L2V"); }, L2B() { return this.dataList.filter((item) => item.qualLv === "L2B"); }, L2C() { return this.dataList.filter((item) => item.qualLv === "L2C"); }, LP() { return this.dataList.filter((item) => item.qualLv === "LP"); }, }, mounted() { // 发送请求获取数据列表 this.getDataList(); }, methods: { async getDataList() { try { const res = await fetch("/api/data/list"); if (res.ok) { const data = await res.json(); this.dataList = data; } } catch (error) { console.error(error); } }, }, }; </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值