Vue 和带模板标签的条件渲染
Vue & conditional rendering with template tag
我正在尝试遵循文档:
但是由于某种原因,我的模板没有按预期工作,我一放入 <template v-if="variable">
vue 就无法渲染任何东西。
<script type="text/x-template" id="dashboard-inititial-message">
<template v-if="okBoom">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
<div v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
<div v-else>
<p>ELSE</p>
</div>
</script>
有什么建议吗?
证明问题的片段:
关于 vue.js 有一件事需要了解,Peter 在评论中指出了这一点。模板不能是根元素,一般根标签只能是一个。
所以当你有这样的模板时:
<script type="text/x-template" id="dashboard-inititial-message-mk1">
<div v-if="okBoom">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
<h3>adas</h3>
<div v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
</script>
你基本上是在问 vue.js 问题。一旦 div with okBoom 结束,Vue 将停止解析您的模板。
网上到处都是和我类似的问题:
简而言之就是解决方案。将您的模板包装到主跨度、div 或转换中(然而这个似乎有点 hacky,另一方面它不会生成不必要的 html 标签)。
我为加载程序使用条件模板呈现(当发生服务器请求时)
new Vue({
el: "#app",
template:
`<div v-else class='somePage'>
<template v-if="isLoading">
<div>LOADING...</div>
</template>
<template v-else>
<h1>title</h1>
<p>The final rendered result will not include the "template" element.</p>
</template>
</div>`,
data: () => ({
isLoading: true
}),
mounted() {
setTimeout(this.getData.bind(this), 1500);
},
methods: {
async getData() {
// await axios ...do some request...
this.isLoading = false
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>
我正在尝试遵循文档:
但是由于某种原因,我的模板没有按预期工作,我一放入 <template v-if="variable">
vue 就无法渲染任何东西。
<script type="text/x-template" id="dashboard-inititial-message">
<template v-if="okBoom">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
<div v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
<div v-else>
<p>ELSE</p>
</div>
</script>
有什么建议吗?
证明问题的片段:
关于 vue.js 有一件事需要了解,Peter 在评论中指出了这一点。模板不能是根元素,一般根标签只能是一个。
所以当你有这样的模板时:
<script type="text/x-template" id="dashboard-inititial-message-mk1">
<div v-if="okBoom">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
<h3>adas</h3>
<div v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
</script>
你基本上是在问 vue.js 问题。一旦 div with okBoom 结束,Vue 将停止解析您的模板。
网上到处都是和我类似的问题:
简而言之就是解决方案。将您的模板包装到主跨度、div 或转换中(然而这个似乎有点 hacky,另一方面它不会生成不必要的 html 标签)。
我为加载程序使用条件模板呈现(当发生服务器请求时)
new Vue({
el: "#app",
template:
`<div v-else class='somePage'>
<template v-if="isLoading">
<div>LOADING...</div>
</template>
<template v-else>
<h1>title</h1>
<p>The final rendered result will not include the "template" element.</p>
</template>
</div>`,
data: () => ({
isLoading: true
}),
mounted() {
setTimeout(this.getData.bind(this), 1500);
},
methods: {
async getData() {
// await axios ...do some request...
this.isLoading = false
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>