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

相关推荐
PanZonghui3 分钟前
用项目说话:我的React博客构建成果与经验复盘
前端·react.js·typescript
挽淚5 分钟前
JavaScript 数组详解:从入门到精通
javascript
言兴6 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte9 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常11 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常12 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
ccc101816 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
南篱17 分钟前
JavaScript 中的 this 关键字:从迷惑到精通
javascript
Struggler28123 分钟前
Chrome插件开发
前端
前端 贾公子35 分钟前
Monorepo + vite 怎么热更新
前端