v-如果不在模板标签上工作

Question

根据Vue文档,我应该能够将v-if条件添加到<template>标记:

<template v-if="false">
  <div>Invisible text</div>
</template>

但是这不会隐藏元素,但是当它添加到子元素时它确实有效:

<template>
  <div v-if="false">Invisible text</div>
</template>

有什么建议？

我将模板包含在另一个.vue文件中:

<template>
  <div id="app">
    <H1 class= "main-title">Title</H1>
    <span class="components">
      <testtemplate></testtemplate>
    </span>
  </div>
</template>

Answer 1

VUE3也有这个问题。使用SFC只是将标签模板嵌套在另一个标签模板中：

<template>
    <template v-if="false">
     You won't see this
    </template>
</template>

Answer 2

在template一个吊牌单文件组件不受Vue公司像正常渲染<template>标签.这仅仅是占位符之一,伴随着<script>和<style>那vue-loader用来建立组件.它的根元素template是组件中的根.

但是,即使它按照你想要的方式工作,你的第一个和第二个例子也没有区别.v-if如果设置为root,则在root上使用将阻止整个组件的模板呈现false.