Vue Directives
const app = Vue.createApp({
data() {
return {
isLoggedIn: true,
avatarUrl: 'https://example.com/avatar.png'
}
},
methods: {
logOut() {
this.isLoggedIn = false
}
}
})
app.mount('#app')
<!-- template -->
<div id="app">
<img v-bind:src="avatarUrl" alt="User avatar" />
<p v-if="isLoggedIn">Welcome back!</p>
<p v-else>Please sign in.</p>
<button v-on:click="logOut">Log out</button>
</div>