Javascript 如何在模板标记上有条件地呈现vue.js？

我正在通过上的参考文档学习vue.js

然后，我在跟进这个例子。但是，部分例子不起作用

这是我的密码

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

标题
第1款

第2款

var app=新的Vue({
el:“#app-3”，
数据：{
好的，没错
}
});

这个代码就是工作

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

标题
第1款

第2款

var app=新的Vue({
el:“#app-3”，
数据：{
好的，没错
}
});

---

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

通过调试控制台：

无法将

用作组件根元素，因为它可能包含 多个节点

您基本上需要一个根元素，而且由于模板标记可以包含多个元素，因此不允许在vue中将其用作根元素

相反，使用div，您重新编写的示例可以：

<div id="app-3">
  <div v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </div>
</div>

标题
第1款

第2款

通过调试控制台：

无法将

用作组件根元素，因为它可能包含 多个节点

您基本上需要一个根元素，而且由于模板标记可以包含多个元素，因此不允许在vue中将其用作根元素

相反，使用div，您重新编写的示例可以：

<div id="app-3">
  <div v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </div>
</div>

标题
第1款

第2款

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

正如您对@xyiii的评论，答案是：

---

那么，Vue.js文档示例的代码是错误的吗

不。 他们只是解释了需要根据同一属性切换多个元素的情况

因此，不要这样做：

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

头衔 第1款

第2款

您可以将它们分组到模板标记中，并按如下方式进行操作：

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

标题
第1款

第2款

标签就像一个占位符。它不会呈现在DOM上

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

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

根元素1
根元素2

因此，为了防止此vue抛出错误

---

要知道为什么只有一个根元素签出@LinusBorg的注释。

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

正如您对@xyiii的评论，答案是：

---

那么，Vue.js文档示例的代码是错误的吗

不。 他们只是解释了需要根据同一属性切换多个元素的情况

因此，不要这样做：

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

头衔 第1款

第2款

您可以将它们分组到模板标记中，并按如下方式进行操作：

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

标题
第1款

第2款

标签就像一个占位符。它不会呈现在DOM上

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

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

根元素1
根元素2

因此，为了防止此vue抛出错误

---

想知道为什么只有一个根元素签出@LinusBorg的评论。

我对vue也是新手，但我认为你们不能使用模板。第一个必须是div左右。模板是针对Vue.component（{}）@Paulquappe-oh。。谢谢！我对vue也是新手，但我觉得你们不能使用模板。第一个必须是div左右。模板是针对Vue.component（{}）@Paulquappe-oh。。谢谢！那么，Vue.js文档示例的代码是错误的吗？然后，就像在根元素上使用模板标记一样，我应该像@Paulquappe那样使用它吗？或者使用转换标记。是吗？瓦姆西·克里希纳解释得很好。这里需要注意的一点是，模板标记不是由DOM解析的，因此它只是一个不可见的层。只需确保只有一个根实例作为入口点。这是有道理的，因为vue组件不能有2个入口点。我完全理解。非常感谢。那么，Vue.js文档示例的代码是错误的吗？然后，就像在根元素上使用模板标记一样，我应该像@Paulquappe那样使用它吗？或者使用转换标记。是吗？瓦姆西·克里希纳解释得很好。这里需要注意的一点是，模板标记不是由DOM解析的，因此它只是一个不可见的层。只需确保只有一个根实例作为入口点。这是有道理的，因为vue组件不能有2个入口点。我完全理解。非常感谢。