v-if 在组件模板标签上

Question

来自docs：

因为 v-if 是一个指令，它必须附加到单个 元素。但是如果我们想要切换多个元素怎么办？在这个 在这种情况下，我们可以在一个元素上使用 v-if，它作为 隐形包装。最终渲染的结果将不包括 元素。

但是在我的组件中的模板上：

<template v-if="false">
    <div>
       ....
    </div>
</template>

但组件仍然呈现。

我问是因为我想在组件上加上一个钩子，所以如果 v-if 为真，我可以在 beforeMounted 和 beforeDestroyed 中做一些代码，如果为假。

Answer 1

如果我不明白你在做什么......

您将 v-if 放入 .vue 文件中的模板标签，对吗？ 像这样

// component.vue
<template v-if="false">
   <div>
     My Component
   </div>
</template>
<script>
export default {
     name: 'my-component'
};
</script>
<styles>
</styles>

对吗？

如果是，你做错了。

模板中有一个标签供Webpack Vue Loader加载组件模板。

所以if 必须放在模板标签内。

// component.vue
<template>
   <div v-if="false">
     My Component
   </div>
</template>
<script>
export default {
     name: 'my-component'
};
</script>
<styles>
</styles>

如果您需要“隐藏”多个元素，只需封装到另一个div。

Answer 2

正如Lucas Katayama 所说，您不能在SFC 中使用v-if，但隐藏组件的另一种方法是在其父组件中的该组件上使用v-if。