如何在 Vue.js 中有条件地渲染元素？

Question

我是 Vue.js 的新手，我刚刚在此处阅读了有关条件渲染的文档 (https://vuejs.org/v2/guide/conditional.html)，但不知何故无法让它工作...

我的代码：

<button onclick="showTemplate()">Teste</button>


<template v-if="app">

    <div id="app">
      {{ message }}
    </div>

</template>

function showTemplate(){
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
}

我希望模板标签仅在应用实例化后呈现。 我也尝试过这段代码的变体，但没有成功。 有人可以帮忙吗？

Answer 1

试试这个并删除按钮。您不需要在函数中调用实例。

// put it on your index.html
<div id="app">
  {{ message }}
</div>

// put it on your script make sure that you have already a CDN of vuejs.
var app = new Vue({
   el: '#app',
   data: {
      message: 'Hello Vue!'
   }
})

Answer 2

使用v-cloak。 v-cloak 的预期用途是隐藏 Vue，直到它被实例化。

function showTemplate() {
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
}

[v-cloak] {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<button onclick="showTemplate()">Teste</button>

<div id="app" v-cloak>
  {{ message }}
</div>

以下是在检索数据时隐藏“加载”屏幕的方法。在这种情况下，该按钮将作为我们的加载屏幕。

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    loaded: false
  },
  methods: {
    getData() {
      setTimeout(() => this.loaded = true, 2000)
    }
  }
})

[v-cloak] {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>

<div id="app" v-cloak>
  <button v-if="!loaded" @click="getData">Get Data</button>

  <div v-if="loaded">
    {{ message }}
  </div>
</div>