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

相关推荐
开开心心就好24 分钟前
免费PDF处理软件,支持多种操作
运维·服务器·前端·spring boot·智能手机·pdf·电脑
全宝41 分钟前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele1 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮1 小时前
【无标题】
开发语言·前端·javascript
fie88891 小时前
浅谈几种js设计模式
开发语言·javascript·设计模式
谦行1 小时前
深度神经网络训练过程与常见概念
前端
Simon_He2 小时前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
巴巴_羊2 小时前
React Ref使用
前端·javascript·react.js
拾光拾趣录3 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
徊忆羽菲3 小时前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts