javascript / beginner
Snippet
Conditional Rendering with v-if
The v-if directive conditionally renders an element based on the truthiness of an expression. If false, the element is completely removed from the DOM. v-else provides a fallback when the condition is not met.
snippet.js
javascript
1
2
3
4
5
6
7
8
<template><button @click="isVisible = !isVisible">Toggle Message</button><p v-if="isVisible">Now you see me!</p><p v-else>The message is hidden.</p></template>
vue
Breakdown
1
v-if="isVisible"
Checks the boolean variable to decide if the paragraph should exist.
2
v-else
Displays this content only if the preceding v-if condition is false.
3
@click="isVisible = !isVisible"
A simple click handler to flip the visibility state.