Conditional Rendering in VueJs

A conditional rendering demo in VueJs using the v-if directive - http://coligo.io

by Tsuneo Yoshioka

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<div id="vue-instance">
  <div v-if="!isLoggedIn">
     aaa
  </div>
  <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>

JavaScript

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