Vue3 条件渲染 v-show

v-show 指令:用于控制元素的显示或隐藏。

执行条件:当条件为 false 时,会添加一个 display:none 属性将元素隐藏。

应用场景:适用于显示隐藏切换频率较高的场景。

html 复制代码
 <div v-show="数据">内容</div>

基础用法:

html 复制代码
<template>
  <h3>条件渲染 v-show</h3>
  <p v-show="status">内容</p>
  <button @click="status = !status">显示/隐藏</button>
</template>

<script setup>
import { ref } from "vue";
let status = ref(true);
</script>

效果

配合 JS 表达式使用

html 复制代码
<template>
  <h3>条件渲染 v-show</h3>
  <p v-show="num == 5">内容</p>
  <button @click="num++">增加({{ num }})</button>
</template>

<script setup>
import { ref } from "vue";
let num = ref(0);
</script>

效果:

注:v-show 会将计算结果转换为 true 或 false,再进行显示隐藏。

原创作者:吴小糖

创作时间:2024.3.2

相关推荐
gongzemin7 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox20 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号952724 分钟前
【JavaScript】十四、轮播图
javascript·css·css3
麦麦大数据42 分钟前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼1 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187301 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下1 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞2 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox