Question

我正在尝试关注文档：

https://vuejs.org/v2/guide/conditional.html

但由于某种原因，我的模板无法按预期工作，只要我放<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>

有什么建议吗？

证明问题的摘录：

https://jsfiddle.net/o2tL2ems/1/

Answer 1

我将条件模板渲染用于加载程序（在服务器请求发生时）

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>

Vue＆amp;带模板标签的条件渲染

1 个答案: