javascript / beginner
Snippet
Conditional Rendering with v-if
The v-if directive is used to conditionally render an element. If the expression evaluates to false, the element is completely removed from the DOM.
snippet.js
javascript
1
2
3
4
5
6
<button @click="isLoggedIn = !isLoggedIn">Toggle Login</button><p v-if="isLoggedIn">Welcome back!</p><p v-else>Please log in.</p>
vue
Breakdown
1
@click="isLoggedIn = !isLoggedIn"
A shorthand for v-on:click that toggles the boolean value of isLoggedIn.
2
v-if="isLoggedIn"
Only renders this paragraph if the isLoggedIn variable is true.
3
v-else
Provides an alternative element to render if the preceding v-if condition is false.