CODEWITHSUNDEEP
vue.js
Gibbs
Gibbs

Reputation: 22956

What is wrong with this simple v-if?

I am trying to understand Vue. I am following vuejs.org

I am trying to make the below code work. But I am failing somewhere.

JSFiddle

I have the below code.

var vm = new Vue({
  "el":"#app1",
  "data":{
    showme:true
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div v-if="showme" id="app1">
  <div id="app2">
    IF is true
  </div>
</div>

 <div v-else id="app3">
  Else is happening
</div>

Upvotes: 2

Views: 43

Answers (1)

Omar
Omar

Reputation: 1101

A Vue app attaches itself to a single DOM element (#app1 in our case) then fully controls it. The HTML is our entry point, but everything else happens within the newly created Vue instance.

<div id="app1">
 <div v-if="showme">
  <div id="app2">
   IF is true
  </div>
 </div>

 <div v-else id="app3">
  Else is happening
 </div>
</div>

var vm = new Vue({
"el":"#app1",
"data":{
 showme:false
}
})

Upvotes: 3

Related Questions