Example: v-if

v-ifwill conditionally render an element if its value is a truthy expression. In the following case,v-ifwill remove/insert thepelement depending on themyvalvalue:

<p id="app">
  <p v-if="myval">Hello Vue</p>
</p>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      myval: true
    }
  });
</script>

Will renders as:

<p id="app">
  <p>Hello Vue</p>
</p>

If we add a consecutive element with thev-elsedirective (a special directive that requires no value), it will be symmetrically removed/inserted asmyvalchanges:

<p v-if="myval">Hello Vue</p>
<p v-else>Goodbye Vue</p>