Vue3 条件渲染 v-show

简介: Vue3 条件渲染 v-show

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

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

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

<div v-show="数据">内容</div>

基础用法:

<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 表达式使用

<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,再进行显示隐藏。

相关文章
|
2天前
vue3【实战】语义化首页布局
vue3【实战】语义化首页布局
16 2
|
2天前
|
存储 容器
vue3【实战】来回拖拽放置图片
vue3【实战】来回拖拽放置图片
10 2
|
2天前
|
JavaScript 开发工具 开发者
vue3【提效】使用 VueUse 高效开发(工具库 @vueuse/core + 新增的组件库 @vueuse/components)
vue3【提效】使用 VueUse 高效开发(工具库 @vueuse/core + 新增的组件库 @vueuse/components)
12 1
|
2天前
|
API
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
13 1
|
2天前
|
JavaScript
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
8 1
|
2天前
|
JavaScript 网络架构
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
11 0
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
|
2天前
vue3 【提效】自动导入框架方法 unplugin-auto-import 实用教程
vue3 【提效】自动导入框架方法 unplugin-auto-import 实用教程
12 0
|
2天前
vue3 【提效】全局布局 vite-plugin-vue-layouts 实用教程
vue3 【提效】全局布局 vite-plugin-vue-layouts 实用教程
14 0
|
3天前
手写 vue3 的 ref,reactive 和 watchEffect
手写 vue3 的 ref,reactive 和 watchEffect
9 0
|
3天前
|
JavaScript
vue3 【实战】封装 “心跳“ 组件
vue3 【实战】封装 “心跳“ 组件
12 0