javascript - 如何在模板标签上有条件渲染 vue.js？

Question

我正在通过Vue.js Reference Doc上的引用文档学习vue.js .

然后，我正在跟进示例。但是，conditional部分示例不起作用。

这是我的代码。

<template id="app-3">
<div v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</div>
</template>
<script src="vue.js"></script>
<script>
    var app = new Vue({
        el : '#app-3',
        data : {
            ok : true
        }
    });
</script>

这段代码可以工作。

    <transition id="app-3">
    <template v-if="ok">
        <div>
            <h1>Title</h1>
            <p>Paragraph 1</p>
            <p>Paragraph 2</p>
        </div>
    </template>
</transition>
<script src="vue.js"></script>
<script>
    var app = new Vue({
        el : '#app-3',
        data : {
            ok : true
        }
    });
</script>

我想知道第一个代码为什么不起作用!

Answer 1

@xyiii 指出控制台中显示的错误。

正如您对 @xyiii 答案的评论:

hmm so, Vue.js Doc example is wrong code?

不。 他们只是解释您想要根据相同属性切换多个元素的情况。

所以不要这样做:

标题 第 1 段

第 2 段

您可以将它们分组在模板标记中并按如下方式执行:

<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>

<template> 标签就像一个占位符。它不会被渲染到 DOM 上。

因此，您可能会错误地拥有两个根元素:

<template v-if="ok">
    <div>Root element 1</div>
    <div>Root element 2</div>
</template>

所以为了防止这个 vue 抛出错误。

要知道为什么只有一个根元素 checkout @LinusBorg 的评论 here .