Conditionals and Lists
v-if and v-else
Conditionally include elements in the render tree.
<p v-if="loading">Loading…</p>
<p v-else-if="error">{{ error }}</p>
<p v-else>Ready</p>v-show
Toggles CSS display. Prefer v-if when the block is rarely needed; v-show when toggling often.
<aside v-show="isOpen">Menu</aside>v-for with keys
Always provide a stable :key.
<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
</li>
</ul>Empty states
Combine conditionals with lists for friendlier UI.
<p v-if="todos.length === 0">No todos yet.</p>
<ul v-else>...</ul>
Comments
One comment per signed-in account. Comments are saved with this page’s URL.