vue3学习笔记之条件渲染
条件渲染
v-if 指令
v-if
指令用于根据表达式的真假来决定是否渲染元素或组件。如果表达式的值为 true
,则元素或组件会被渲染到 DOM 中;如果为 false
,则元素或组件不会被渲染,甚至不会在 DOM 中存在。
基本用法
<template><div><h1 v-if="isShow">This is a heading</h1></div>
</template><script setup>
import { ref } from 'vue';const isShow = ref(true);
</script>
在上述例子中,只有当 isShow
的值为 true
时,<h1>
元素才会被渲染到页面上。
多个元素的条件渲染
你可以使用 <template>
标签来包裹多个元素,并在其上使用 v-if
指令。这样可以根据条件一次性渲染或不渲染多个元素。
<template><div><template v-if="isShow"><h1>Heading 1</h1><p>Paragraph 1</p></template></div>
</template><script setup>
import { ref } from 'vue';const isShow = ref(true);
</script>
v-else 和 v-else-if
v-else
和 v-else-if
指令可以与 v-if
一起使用,用于创建多个条件分支。
<template><div><h1 v-if="condition === 1">Condition 1</h1><h1 v-else-if="condition === 2">Condition 2</h1><h1 v-else>Other Condition</h1></div>
</template><script setup>
import { ref } from 'vue';const condition = ref(2);
</script>
v-show 指令
v-show
指令也用于根据条件显示或隐藏元素,但它与 v-if
不同的是,无论条件真假,元素始终会被渲染到 DOM 中,只是通过 CSS 的 display
属性来控制其显示或隐藏。
基本用法
<template><div><h1 v-show="isShow">This is a heading</h1></div>
</template><script setup>
import { ref } from 'vue';const isShow = ref(true);
</script>
在上述例子中,无论 isShow
的值是 true
还是 false
,<h1>
元素都会存在于 DOM 中,只是当 isShow
为 false
时,它的 display
属性会被设置为 none
,从而在页面上隐藏。
v-if 和 v-show 的区别
- 渲染方式:
v-if
是根据条件的真假来决定是否渲染元素,条件为false
时,元素不会出现在 DOM 中。v-show
则是始终渲染元素,只是通过 CSS 控制其显示或隐藏。
- 性能:
v-if
有更高的切换开销,因为它需要在 DOM 中添加或移除元素。v-show
有更高的初始渲染开销,因为它不管条件如何都会渲染元素。
- 使用场景:
- 当条件在运行时很少改变时,使用
v-if
更合适。 - 当条件频繁切换时,使用
v-show
更合适。
- 当条件在运行时很少改变时,使用