v-if和v-for一起使用

疯狂的夏铭予

已于 2022-02-13 22:01:12 修改

阅读量545

点赞数 1

分类专栏： vue 文章标签： vue

于 2022-02-13 21:59:00 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42356513/article/details/122914977

版权

12 篇文章

订阅专栏

本文探讨了在 Vue 中如何正确地结合使用 `v-if` 和 `v-for` 指令，以提高模板的渲染效率。通过将 `v-if` 放在外层 `template` 或者内层 `button` 上，来避免不必要的遍历和渲染，优化组件性能。同时，文章提供了两种不同的实现方式供开发者参考。

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

让v-if和v-for一起使用

外层包裹一个template节点,示例

          <template v-if="">
            <div v-for="">
            </div>
          </template>

   <template v-for="(item, index) in end">
      <button v-if="start <= item" :key="index">
        {{ item }}
      </button>
    </template>