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.