vue循环v-for中使用v-if屏蔽注释的方法

最新推荐文章于 2025-07-18 08:45:00 发布

weixin_34268753

最新推荐文章于 2025-07-18 08:45:00 发布

阅读量2.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5c1351efe51d45203949e98c

本文介绍如何在Vue.js中使用v-if和v-else-if指令来避免渲染不必要的注释标记，通过正确的条件判断结构，可以有效减少页面渲染时的空间占用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在很多场景中都需要v-for循环再使用v-if条件判断渲染出需要的视图，但是在大量数据渲染是这种方法会在渲染视图中出现这种注释代替不显示的元素。如果条件很多，渲染出来的会占据大量的空间。以下是一个去掉的方法：

<template v-for="(item,key) in list" >
    <template v-if="item.type=='text'" >
      <div>text</div>
    </template>
    <template v-else-if="item.type=='textarea'" >
      <div>textarea</div>
    </template>
    <template v-else>
      <div>number</div>
    </template>
</template>
复制代码

注意：使用v-else-if，就是隐藏``的关键,记得要v-else结尾，不然还是会多出一个``。else-if存在一些限制，如果保证渲染出的效果跟自己的需求吻合，最好是保持一个判断条件，使用computed或者methods等方法都可以。

<template v-for="(item,key) in list" >
    <template v-if="item.num>0" >
      <div>text</div>
    </template>
    <template v-else-if="item.num>0&&item.type=='textarea'" >
      <div>textarea</div>
    </template>
</template>
以上代码无法渲染出想要的视图，正确如下：
<template v-for="(item,key) in list" >
    <template v-if="item.num>0" >
      <div>text</div>
    </template>
    <template v-else-if="item.num>1" >
      <div>textarea</div>
    </template>
</template>
复制代码