Vue.js 条件渲染和 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 应用程序中的元素可见性至关重要。

以上是Vue.js 条件渲染和 V-if 与 V-show的详细内容。更多信息请关注PHP中文网其他相关文章！