Vuejs 条件渲染和 V-if 与 V-show

本篇文章向大家介绍《Vuejs 条件渲染和 V-if 与 V-show》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

如果你喜欢我的文章，可以请我一杯咖啡:)
给我买咖啡

vue.js 条件渲染

v-if 和 v-show 指令用于有条件地渲染 vue.js 中的块。

v-如果

在vue.js中，指令v-if用于有条件地渲染块。仅当指令的表达式返回真值时才会渲染该块。

示例 :

<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>

您可以使用 v-else 指令来指示 v-if 的“else 块”。如果 v-if 指令 表达式不返回 true，则渲染 v-else 块。

<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

v-else-if，充当 v-if 的 “else if 块”。也可以多次链接。当 v-if 和 v-else-if 计算结果不为 true 时，v-else 指令被触发。

 <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 指令作为另一个选项。

<h1 v-show="ok">Ok!</h1>

不同之处在于带有 v-show 的元素始终会被渲染并保留在 dom 中。 v-show 更改 css 显示属性以显示或隐藏元素。 v-show 不能与 v-else 一起使用

v-if 与 v-show

v-if 是“真正的”条件渲染，因为它确保条件块内的事件侦听器和子组件在切换期间被正确销毁和重新创建。

v-if ：如果初始渲染时条件为 false，则不会执行任何操作 - 条件块不会被渲染，直到条件第一次变为 true。

v-show 始终呈现并保留在 dom 中。 v-show 更改 css 显示属性以显示或隐藏元素。 v-show 不能与 v-else 一起使用

v-if 具有更高的切换成本，而 v-show 具有更高的初始渲染成本。如果您需要经常切换某些内容，则更喜欢 v-show；如果条件在运行时不太可能改变，则更喜欢 v-if。

结论

在本文中，我们研究了 v-if 和 v-show 指令的功能和差异。了解这些区别对于优化渲染性能和管理 vue.js 应用程序中的元素可见性至关重要。

到这里，我们也就讲完了《Vuejs 条件渲染和 V-if 与 V-show》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！