Vue.js
Beginner
1 min read
v-if, v-else-if, v-else and v-show
Example
<template>
<!-- v-if / v-else-if / v-else -->
<div v-if="role === 'admin'">
<AdminPanel />
</div>
<div v-else-if="role === 'editor'">
<EditorPanel />
</div>
<div v-else>
<ReadOnlyView />
</div>
<!-- v-show: stays in DOM, toggles display -->
<Transition name="fade">
<div v-show="isMenuOpen" class="dropdown">
<ul><li>Profile</li><li>Settings</li><li>Logout</li></ul>
</div>
</Transition>
<!-- template v-if: no wrapper element emitted -->
<template v-if="isLoaded">
<h2>Results</h2>
<ResultList :items="results" />
<Pagination :total="total" />
</template>
<p v-else>Loading…</p>
</template>
<script setup>
import { ref } from 'vue';
const role = ref('editor');
const isMenuOpen = ref(false);
const isLoaded = ref(false);
const results = ref([]);
const total = ref(0);
</script>