当前位置: 首页 > news >正文

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 更合适。
http://www.xdnf.cn/news/9703.html

相关文章:

  • 「数据可视化 D3系列」入门第八章:动画效果详解(让图表动起来)
  • 「GitHub热榜」AIGC系统源码:AI问答+绘画+PPT+音乐生成一站式
  • 第12篇:Linux程序访问控制FPGA端Switch<一>
  • Yocto项目实战教程 · 第4章:4.2小节-菜谱
  • AWS Elastic Beanstalk的部署Python Flask后端服务(Hello,World)
  • JavaScript 性能优化实战
  • 决战浏览器渲染:减少重绘(Repaint)与重排(Reflow)的性能优化策略
  • 基于springBoot+vue的PC 端学习系统(源码+lw+部署文档+讲解),源码可白嫖!
  • C++ AVL树
  • HAL库通过FATFS和SDIO+DMA写入SD卡数据错误
  • 2025MathorcupD题 短途运输货量预测及车辆调度问题 保姆级教程讲解|模型讲解
  • L2-006 树的遍历
  • DHTMLX宣布推出支持 Redux、TypeScript 和 MUI 的 React Gantt甘特图控件
  • redis利用备忘录
  • Jsp技术入门指南【五】详细讲解jsp结构页面
  • 【含文档+PPT+源码】基于Python爬虫二手房价格预测与可视化系统的设计与实现
  • 论文阅读:2024 arxiv AI Safety in Generative AI Large Language Models: A Survey
  • 自然语言处理入门7——注意力机制
  • 数据结构——顺序表(C语言实现)
  • [250418] 智谱 AI 发布新一代模型,同时推出新域名 Z.ai
  • yocto编译使用共享缓存
  • IntelliSense 已完成初始化,但在尝试加载文档时出错
  • 前端单元测试实战:如何开始?
  • Vue2+Vue3 130~180集学习笔记
  • Google Colab测试部署Qwen大模型,实现PDF转MD场景OCR 识别(支持单机环境)
  • 迭代器模式:统一不同数据结构的遍历方式
  • ctf.show—Web(1-10)详细通关教程
  • 2025年行业AI Agent选型专业指南
  • RT-Thread RTThread studio 初使用
  • 零基础玩转AI数学建模:从理论到实战