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回答：

嗯，Vue.js Doc示例是错误的代码？

<强>都能跟得上即可。它们只是解释了您希望根据相同属性切换多个元素的情况。

所以不要这样做：

标题第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抛出错误。

要知道为什么只有一个根元素结帐@ LinusBorg评论here。

Answer 2

通过调试控制台：

不能使用<template>作为组件根元素，因为它可能包含多个节点。

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

相反，使用div并且您重写的示例有效：

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

如何条件渲染模板标签上的vue.js？

2 个答案: