如何在模板标签上呈现条件vue.js？
如何在模板标签上呈现条件vue.js？
提问于 2018-05-12 11:09:26
我正在通过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>这个代码是有用的。
<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>我想知道第一段代码为什么不工作！
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-05-12 11:44:22
@xyiii指出控制台中显示的错误。
正如您在@xyiii上评论的那样：
嗯，那么，Vue.js文档示例是错误的代码吗？
Nope.他们只是在解释您想要根据同一属性切换多个元素的情况。
所以，不要这样做：
标题第1段
第2段
您可以将它们分组到一个模板标记中，并这样做：
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>Stack Overflow用户
发布于 2018-05-12 11:18:54
通过调试控制台：
不能使用
<template>作为组件根元素，因为它可能包含多个节点。
您基本上需要一个根元素，而且由于模板标记可以包含多个元素，因此不允许在vue中将其用作根元素。
相反，使用div，您的重新编写的示例工作：
<div id="app-3">
<div v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50305571
复制相关文章
相似问题
腾讯云开发者
