Question

来自docs：

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

但是我的组件中的模板：

$now = new DateTime();
if ($now->format('w') < 4) {
    $now->modify('next thursday')
} elseif ($now->format('w') > 4) {
    $now->modify('last thursday')
}

echo $now->format('Y-m-d');

但该组件仍然呈现。

我问，因为我想在组件上使用一个钩子，所以如果v-if为true，我可以在<template v-if="false"> <div> .... </div> </template>和beforeMounted中执行一些代码，如果为false。

Answer 1

如果我不知道你在做什么......

您是否在.vue文件中将v-if int放在模板标记中？喜欢这个

// 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>

如果你需要＆＃34;隐藏＆＃34;多个元素，只是封装到另一个div。

Answer 2

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

v-if在组件模板标签上？

2 个答案: