v-if and v-show

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>

  <div id="vue-instance">
    <div v-if="isLoggedIn">
      Welcome to coligo!
      <button @click="login" type="submit">Logout</button>
    </div>
    <div v-else>
      <input type="text" placeholder="username">
      <input type="password" placeholder="password">
      <button @click="login" type="submit">Login</button>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/vue/2.1.6/vue.js"></script>

  <script>
    var vm = new Vue({
     el: '#vue-instance',
     data: {
       isLoggedIn: false
      },
     methods:{
      login: function(){
        // 'this' refers to the vm instance
        this.isLoggedIn = !this.isLoggedIn;
      }
    }
  });
  </script>

  </body>
</html>

Generally speaking, v-if has higher toggle costs while v-show has higher initial render costs. So prefer v-show if you need to toggle something very often, and prefer v-if if the condition is unlikely to change at runtime.

results matching ""

    No results matching ""