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

13 v-show指令

news 2026/2/8 9:49:59

概述

v-show用于实现组件的显示和隐藏，和v-if单独使用的时候有点类似。不同的是，v-if会直接移除dom元素，而v-show只是让dom元素隐藏，而不会移除。

在实际开发中，v-show也经常被用到，需要重点掌握。

基本用法

我们创建src/components/Demo13.vue，在这个组件中，我们要：

1：通过两个按钮切换isShow的布尔值
2：根据isShow的布尔值，控制是否显示“我是通过v-show控制的内容”

代码如下：

<script setup>
import {ref} from "vue";const isShow = ref(true)
</script>
<template><div v-show="isShow">v-show控制的内容</div><hr><div><h3>{{ isShow }}</h3><button @click="isShow=true">显示</button><button @click="isShow=false">隐藏</button></div>
</template>

接着，我们修改src/App.vue，引入Demo13.vue并进行渲染：

<script setup>
import Demo from "./components/Demo13.vue"
</script>
<template><h1>欢迎跟着Python私教一起学习Vue3入门课程</h1><hr><Demo/>
</template>

然后，我们浏览器访问：http://localhost:5173/

在这里插入图片描述

完整代码

package.json

{"name": "hello","private": true,"version": "0.1.0","type": "module","scripts": {"dev": "vite","build": "vite build"},"dependencies": {"vue": "^3.3.8"},"devDependencies": {"@vitejs/plugin-vue": "^4.5.0","vite": "^5.0.0"}
}

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],
})

index.html

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + Vue</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>

src/main.js

import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

src/App.vue

<script setup>
import Demo from "./components/Demo13.vue"
</script>
<template><h1>欢迎跟着Python私教一起学习Vue3入门课程</h1><hr><Demo/>
</template>

src/components/Demo13.vue

<script setup>
import {ref} from "vue";const isShow = ref(true)
</script>
<template><div v-show="isShow">v-show控制的内容</div><hr><div><h3>{{ isShow }}</h3><button @click="isShow=true">显示</button><button @click="isShow=false">隐藏</button></div>
</template>

启动方式

yarn
yarn dev

浏览器访问：http://localhost:5173/

13 v-show指令

概述 v-show用于实现组件的显示和隐藏，和v-if单独使用的时候有点类似。不同的是，v-if会直接移除dom元素，而v-show只是让dom元素隐藏，而不会移除。在实际开发中，v-show也经常被用到，需要重点掌握。基本…...

编程日记 2023/12/20 13:13:10

23级新生C语言周赛(6)(郑州轻工业大学)

题目链接:ZZULIOJ 3110: 数(shu)数(shu)问题分析: 看到这个题第一步想的是先把每个平方数给求出来然后枚举但是时间复杂度大于1e8 交了一下TLE 但后来打表发现,好数太多了要是枚举的话注定TLE 能不能间接的去做呢? 把不是的减去,那不就是好数了吗? 这个时候又是打表,会…...

编程日记 2023/12/20 13:12:09

关于“Python”的核心知识点整理大全24

目录编辑 10.1.6 包含一百万位的大型文件 pi_string.py 10.1.7 圆周率值中包含你的生日吗 10.2 写入文件 10.2.1 写入空文件 write_message.py programming.txt 10.2.2 写入多行 10.2.3 附加到文件 write_message.py programming.txt 10.3 异常 10.3.1 处理 Ze…...

编程日记 2023/12/20 13:08:06

Vue - 基于Element UI封装一个表格动态列组件

1 组件需求背景在后台管理系统中，表格的使用频率非常高，统一封装表格动态列组件并全局注册使用，可大大提升代码的复用性和可维护性。 2 全局注册 src/plugins/index.js： import columns from ./columns/indexexport default …...

编程日记 2023/12/20 13:04:03

计算机网络：DNS域名解析系统

我最近开了几个专栏，诚信互三！ > |||《算法专栏》：：刷题教程来自网站《代码随想录》。||| > |||《C专栏》：：记录我学习C的经历，看完你一定会有收获。||| > |||《Linux专栏》&#xff1…...

编程日记 2023/12/20 13:03:02

java面试：==和equals有什么区别？

在 Java 中，"" 和 "equals" 有着不同的作用： "" 运算符： 在基本数据类型（如 int、char 等）中，"" 用于比较它们的值是否相等。在引用类型中，"&q…...

编程日记 2023/12/20 13:00:59

数字人SaaS系统无限生成AI数字人！

市面上数字人软件层出不穷，选择一款适合的数字人软件是成功的第一步，只需要一款软件就解决数字人直播和数字人短视频的制作，青否数字人SaaS系统（数字人源码：zhibo175）你值得拥有！ 青否数字人Saa…...

编程日记 2023/12/20 12:59:58

【MySQL】——数据类型及字符集

🎃个人专栏： 🐬 算法设计与分析：算法设计与分析_IT闫的博客-CSDN博客 🐳Java基础：Java基础_IT闫的博客-CSDN博客 🐋c语言：c语言_IT闫的博客-CSDN博客 🐟MySQL&#xff1a…...

编程日记 2023/12/20 12:58:58

Redis cluster集群设置密码

Redis cluster集群设置密码 1 备份数据 # 链接redis集群,执行rdb快照 bgsave # 备份dump.rdb文件 cp /data/redis/cluster/dump.rdb /data/redis/cluster/backup/dump.rdb.202312202 设置密码必须保证每个节点的密码保持一致，不然 Redirected 的时候会失败 2.1…...

编程日记 2023/12/20 12:57:57

Docker 核心技术

Docker 定义：于 Linux 内核的 Cgroup，Namespace，以及 Union FS 等技术，对进程进行封装隔离，属于操作系统层面的虚拟化技术，由于隔离的进程独立于宿主和其它的隔离的进程，因此也称其为容器Docke…...

编程日记 2023/12/20 12:53:53

15 使用v-model绑定单选框

概述使用v-model绑定单选框也比较常见，比如性别，要么是男，要么是女。比如单选题，给出多个选择，但是只能选择其中的一个。在本节课中，我们演示一下这两种常见的用法。基本用法我们创建src/component…...

编程日记 2023/12/20 12:52:52

go语言指针变量定义及说明

go语言指针主要需要记住两个特殊符号， 一个是 & 用来获取变量对应的内存地址另一个是 * 用来获取指针对应的变量值下面是个最简单的go语言指针说明 package mainimport "fmt"//指针为内存地址func main() {var a string "指针对应的变量&…...

编程日记 2023/12/20 12:51:51

基于“Galera+MariaDB”搭建多主数据库集群的实例

1、什么是多主数据库集群多主数据库集群是一种数据库集群架构，每个节点都可以接收写入操作和读取操作，并且通过心跳机制同步数据，保证数据一致性和高可用性。因多主数据库集群每个节点都可以承担读写操作，因此它可以充分利用各个…...

编程日记 2023/12/20 12:50:50

arcgis javascript api4.x加载天地图cgs2000坐标系

需求：arcgis javascript api4.x加载天地图cgs2000坐标系效果： 示例代码： <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"wid…...

编程日记 2023/12/20 12:48:48

算法学习——回溯算法

回溯算法理论基础回溯法的效率回溯法解决的问题回溯法模板组合思路回溯法三部曲代码组合（优化）组合总和III思路代码电话号码的字母组合思路回溯法来解决n个for循环的问题回溯三部曲代码组合总和思路代码组合总和II思路代码理论基础什么是回溯法…...

编程日记 2023/12/20 12:44:45

C语言—小小圣诞树

这个代码会询问用户输入圣诞树的高度，然后根据输入的高度在控制台上显示相应高度的圣诞树。 #include <stdio.h>int main() {int height, spaces, stars;printf("请输入圣诞树的高度: ");scanf("%d", &height);spaces height - 1;st…...

编程日记 2023/12/20 12:42:43

自定义控件通过继承TextSwitcher实现直接上代码 public class NoticesSwitcher extends TextSwitcher implements ViewSwitcher.ViewFactory {private Context mContext;private List<Notice> mData;private final long DEFAULT_TIME_SWITCH_INTERVAL 1000;//1spri…...

编程日记 2023/12/20 12:41:42

tensorflow入门自定义模型

前面说了自定义的层，接下来自定义模型，我们以下图为例子这个模型没啥意义，单纯是为了写代码实现这个模型首先呢，我们看有几个部分，dense不需要我们实现了，我们就实现Res，为了实现那个*3,我们…...

编程日记 2023/12/20 12:37:37

虚拟机启动 I/O error in “xfs_read_agi+0x95“

1.在选择系统界面按e 进入维护模式 2.找到ro把ro改成 rw init/sysroot/bin/sh 然后按Ctrlx 3.找到坏掉的分区，以nvme0n1p3为例进行修复 xfs_repair -d /dev/nvme0n1p3 4.init 6 重新启动以下情况先umount 再修复则修复成功...

编程日记 2023/12/20 12:36:37

【MYSQL】-库的操作

💖作者：小树苗渴望变成参天大树🎈 🎉作者宣言：认真写好每一篇博客💤 🎊作者gitee:gitee✨ 💞作者专栏：C语言,数据结构初阶,Linux,C 动态规划算法🎄 如果你 …...

编程日记 2023/12/20 12:29:31

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

编程新知 2026/2/8 4:37:20

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架，用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录，以帮助监视应用程序行为和诊断问题。可以通过配置不同的记录提供程…...

编程新知 2026/2/8 4:37:06

docker详细操作--未完待续

docker介绍 docker官网: Docker：加速容器应用程序开发 harbor官网：Harbor - Harbor 中文使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像是什么 Docker 是一种开源的容器化平台，用于将应用程序及其依赖项（如库、运行时环…...

编程新知 2026/2/5 4:33:24

【Java学习笔记】Arrays类

Arrays 类 1. 导入包：import java.util.Arrays 2. 常用方法一览表方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序（自然排序和定制排序）Arrays.binarySearch()通过二分搜索法进行查找（前提：数组是…...

编程新知 2025/12/3 9:38:15

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位）三、定位元素的层级关系（z-i…...

编程新知 2026/1/26 9:48:34