This content originally appeared on DEV Community and was authored by Sonay Kara
If you like my articles, you can buy me a coffee :)
Buy me coffee
Vue.js Conditional Rendering
v-if and v-show directives are used to conditionally render a block in Vue.js.
v-if
In vue.js, the directive v-if is used to conditionally render a block. The block will only be rendered if the directive's expression returns a truthy value.
Example :
<script setup>
import { ref } from 'vue'
const show = ref(true)
</script>
<template>
<button @click="show = !show">toggle</button>
<h1 v-if="show">Vue.js</h1>
</template>
You can use the v-else directive to indicate an "else block" for v-if. If the v-if directive expression does not return true, v-else block is rendered.
<script setup>
import { ref } from 'vue'
const show = ref(true)
</script>
<template>
<button @click="show = !show">toggle</button>
<h1 v-if="awesome"> v-if directive </h1>
<h1 v-else> v-else directive </h1>
</template>
v-else-if
The v-else-if, serves as an "else if block" for v-if. It can also be chained multiple times. When v-if and v-else-if do not evaluate to true, the v-else directive is triggered.
<p v-if="currentState === 0">State 0: Message 1</p>
<p v-else-if="currentState === 1">State 1: Message 2</p>
<p v-else-if="currentState === 2">State 2: Message 3</p>
<p v-else>State 3: Message 4</p>
v-show
When we want to display an item conditionally, we can use the v-show directive as another option.
<h1 v-show="ok">Ok!</h1>
The difference is that an element with a v-show is always rendered and remains in the DOM. v-show changes the CSS display property to show or hide the element. v-show doesn't work with v-else
v-if vs. v-show
v-if is "real" conditional rendering because it ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles.
v-if : if the condition is false on initial render, it will not do anything - the conditional block won't be rendered until the condition becomes true for the first time.
v-show is always rendered and remains in the DOM. v-show changes the CSS display property to show or hide the element. v-show doesn't work with v-else
v-if has higher toggle costs while v-show has higher initial render costs. prefer v-show if you need to toggle something very often, and prefer v-if if the condition is unlikely to change at runtime.
Conclusion
In this article, we examined the features and differences of v-if and v-show directives. Understanding these distinctions is essential for optimizing rendering performance and managing element visibility in your Vue.js applications.
This content originally appeared on DEV Community and was authored by Sonay Kara
Sonay Kara | Sciencx (2024-10-18T23:07:23+00:00) Vue.js Conditional Rendering and V-if vs V-show. Retrieved from https://www.scien.cx/2024/10/18/vue-js-conditional-rendering-and-v-if-vs-v-show/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.