Vue 3 is in beta and it’s subject to change.
Vue 3 is the up and coming version of Vue front end framework.
It builds on the popularity and ease of use of Vue 2.
In this article, we’ll look at conditionally rendering items with Vue.
v-else
We can use v-else to display an alternative item with the value in v-if is falsy.
For example, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<button @click="on = !on">toggle</button>
<h1 v-if="on">hello</h1>
<h1 v-else>bye</h1>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
on: true
};
}
}).mount("#app");
</script>
</body>
</html>
When we toggle on to true , the ‘hello’ is displayed.
Otherwise, ‘bye’ is displayed.
v-else must immediately follow a v-if or a v-else-if element.
Otherwise, it won’t be recognized.
Conditional Groups with v-if on <template>
v-if can be used on template so that we can conditionally display a group of elements.
For example, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<button @click="on = !on">toggle</button>
<template v-if="on">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
on: true
};
}
}).mount("#app");
</script>
</body>
</html>
We have the v-if added to the template so that we can toggle everything inside all at once.
v-else-if
We can use v-else-if to display something if a case is true .
For example, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<div v-if="type === 'a'">
a
</div>
<div v-else-if="type === 'b'">
b
</div>
<div v-else-if="type === 'c'">
c
</div>
<div v-else>
something else
</div>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
type: "a"
};
}
}).mount("#app");
</script>
</body>
</html>
We have the v-else-if directive to display the different items according to the value of type .
Since we set it to 'a' , we’ll see ‘a’ displayed.
v-else-if must be immediately after v-if or another v-else-if element.
v-show
The v-show directive also lets us conditionally rendering items on the screen.
But the difference is that v-show elements always render on the DOM and it’s hidden with CSS if its value is falsy.
v-show doesn’t support the template element and can’t be used with v-else .
For example, we can use it by writing:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<button @click="on = !on">toggle</button>
<h1 v-show="on">hello</h1>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
on: true
};
}
}).mount("#app");
</script>
</body>
</html>
We have the v-show directive which will toggle the CSS display property to show or hide the h1 element.
v-if vs v-show
v-if is real conditional rendering because all the event listeners and child components are destroyed when they aren’t rendered.
v-if is lazy, so if its value is falsy, it won’t be rendered until it becomes true .
v-show is much simpler, it just toggles the display CSS property to change the display.
v-show is better if we need to toggle something often and v-if is good for other cases.
Conclusion
We can use v-if and v-show to conditionally render items.
v-if changes the DOM structure, and v-show changes the CSS only.
