[Vuejs]-How to render an element conditionally in Vue.js?

by

2👍

✅

Use v-cloak. The intended use of v-cloak is to hide the Vue until it is instantiated.

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>

Here is how you might hide your "loading" screen when data is retrieved. In this case, the button will serve as our loading screen.

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>
👤Bert

0👍

Try this and remove the button. You don’t need to call the instance within the function.

// 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!'
   }
})
👤Jrey

Leave a comment