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

【vue】点击按钮弹出卡片,点击卡片中的取消按钮取消弹出的卡片(附代码)

实现思路:

  1. 在按钮上绑定一个点击事件,默认是true;
  2. 在export default { }中注册变量
  3. 给卡片标签用v-if判断是否要显示卡片,ture则显示;
  4. 在卡片里面写好你想要展示的数据;
  5. 给卡片添加一个取消按钮,绑定一个点击事件,值为false


完整代码 

01-page.vue

<template>
<el-button type="danger" round @click="showCard= true">Danger</el-button><el-card v-if="showCard" class="box-card"><template #header><div class="card-header"><span>Card name</span><el-button class="button" text>Operation button</el-button></div></template><div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div><button @click="showCard = false">取消</button></el-card></template><script>
export default {data () {return {showCard: false}}
}
</script><style scoped>
.card-header {display: flex;justify-content: space-between;align-items: center;
}.text {font-size: 14px;
}.item {margin-bottom: 18px;
}.box-card {width: 480px;
}
</style>

 index.js

import { createRouter, createWebHashHistory } from 'vue-router'
// eslint-disable-next-line camelcase
import zero_one from '../views/test_dir/01-page'const routes = [{path: '/01',component: zero_one}
]const router = createRouter({history: createWebHashHistory(),routes
})export default router

文件结构

效果展示

点击前

 点击后

相关文章:

【vue】点击按钮弹出卡片,点击卡片中的取消按钮取消弹出的卡片(附代码)

实现思路&#xff1a; 在按钮上绑定一个点击事件&#xff0c;默认是true&#xff1b;在export default { }中注册变量给卡片标签用v-if判断是否要显示卡片&#xff0c;ture则显示&#xff1b;在卡片里面写好你想要展示的数据&#xff1b;给卡片添加一个取消按钮&#xff0c;绑…...

【K8S】pod 基础概念讲解

目录 Pod基础概念&#xff1a;在Kubrenetes集群中Pod有如下两种使用方式&#xff1a;pause容器使得Pod中的所有容器可以共享两种资源&#xff1a;网络和存储。总结&#xff1a;kubernetes中的pause容器主要为每个容器提供以下功能&#xff1a;Kubernetes设计这样的Pod概念和特殊…...

ASP.NET Core中间件记录管道图和内置中间件

管道记录 下图显示了 ASP.NET Core MVC 和 Razor Pages 应用程序的完整请求处理管道 中间件组件在文件中添加的顺序Program.cs定义了请求时调用中间件组件的顺序以及响应的相反顺序。该顺序对于安全性、性能和功能至关重要。 内置中间件记录 内置中间件原文翻译MiddlewareDe…...

[系统安全] 五十二.DataCon竞赛 (1)2020年Coremail钓鱼邮件识别及分类详解

您可能之前看到过我写的类似文章,为什么还要重复撰写呢?只是想更好地帮助初学者了解病毒逆向分析和系统安全,更加成体系且不破坏之前的系列。因此,我重新开设了这个专栏,准备系统整理和深入学习系统安全、逆向分析和恶意代码检测,“系统安全”系列文章会更加聚焦,更加系…...

Android学习之路(3) 布局

线性布局LinearLayout 前几个小节的例程中&#xff0c;XML文件用到了LinearLayout布局&#xff0c;它的学名为线性布局。顾名思义&#xff0c;线性布局 像是用一根线把它的内部视图串起来&#xff0c;故而内部视图之间的排列顺序是固定的&#xff0c;要么从左到右排列&#xf…...

Python实现GA遗传算法优化XGBoost回归模型(XGBRegressor算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 遗传算法&#xff08;Genetic Algorithm&#xff0c;GA&#xff09;最早是由美国的 John holland于20世…...

C#软件外包开发流程

C# 是一种由微软开发的多范式编程语言&#xff0c;常用于开发各种类型的应用程序&#xff0c;从桌面应用程序到移动应用程序和Web应用程序。下面和大家分享 C# 编程学习流程&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#…...

队列的实现

1.队列的概念 队列&#xff1a;只允许在一端进行插入数据操作&#xff0c;在另一端进行删除数据操作的特殊线性表&#xff0c;队列具有先进先出FIFO(First In First Out)。 入队列&#xff1a;进行插入操作的一端称为队尾 出队列&#xff1a;进行删除操作的一端称为队头 2.队列…...

Node + Express 后台开发 —— 起步

Node Express 后台开发 —— 起步 前面陆续学习了一下 node、npm、模块&#xff0c;也稍尝试 Express&#xff0c;感觉得换一个思路加快进行。 比如笔者对前端的开发已较熟悉&#xff0c;如果领导给一个内部小网站的需求&#xff0c;难道说你得给我配置一个后端&#xff1f;…...

Python学习笔记第五十七天(Pandas 数据清洗)

Python学习笔记第五十七天 Pandas 数据清洗Pandas 清洗空值isnull() Pandas替换单元格mean()median()mode() Pandas 清洗格式错误数据Pandas 清洗错误数据Pandas 清洗重复数据duplicated()drop_duplicates() 后记 Pandas 数据清洗 数据清洗是对一些没有用的数据进行处理的过程…...

Elasticsearch的一些基本概念

文章目录 基本概念&#xff1a;文档和索引JSON文档元数据索引REST API 节点和集群节点Master eligible节点和Master节点Data Node 和 Coordinating Node其它节点 分片(Primary Shard & Replica Shard)分片的设定操作命令 基本概念&#xff1a;文档和索引 Elasticsearch是面…...

Guitar Pro8专业版吉他学习、绘谱、创作软件

Guitar Pro 8 专业版更强大&#xff01;更优雅&#xff01;更完美&#xff01;Guitar Pro 8.0 五年磨一剑&#xff01;多达30项功能优化&#xff01;Guitar Pro8 版本一共更新近30项功能&#xff0c;令吉他打谱更出色&#xff01;Guitar Pro8 是自2017年4月发布7.0之后发布的最…...

SpringBoot复习(39)Servlet容器的自动配置原理

Servlet容器自动配置类为ServletWebServerFactoryAutoConfiguration 可以看到通过Import注解导入了三个配置类&#xff1a; 通过这个这三个配置类可以看出&#xff0c;它们都使用了ConditionalOnClass注解&#xff0c;当类路径存在tomcat相关的类时&#xff0c;会配置一个T…...

【前端 | CSS】盒模型clientWidth、clientHeight、offsetWidht、offsetHeight

图 先看一个例子 html <div class"container"><div class"item">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div> </…...

Django 高级指南:深入理解和使用类视图和中间件

Django 是一款强大的 Python Web 框架&#xff0c;它提供了一套完整的解决方案&#xff0c;让我们能够用 Python 语言快速开发和部署复杂的 Web 应用。在本文中&#xff0c;我们将会深入研究 Django 中的两个高级特性&#xff1a;类视图&#xff08;Class-Based Views&#xff…...

《C语言深度解剖》.pdf

&#x1f407; &#x1f525;博客主页&#xff1a; 云曦 &#x1f4cb;系列专栏&#xff1a;深入理解C语言 &#x1f4a8;吾生也有涯&#xff0c;而知也无涯 &#x1f49b; 感谢大家&#x1f44d;点赞 &#x1f60b;关注&#x1f4dd;评论 C语言深度解剖.pdf 提取码:yunx...

【小梦C嘎嘎——启航篇】string介绍以及日常使用的接口演示

【小梦C嘎嘎——启航篇】string 使用&#x1f60e; 前言&#x1f64c;C语言中的字符串标准库中的string类string 比较常使用的接口对上述函数和其他函数的测试代码演示&#xff1a; 总结撒花&#x1f49e; &#x1f60e;博客昵称&#xff1a;博客小梦 &#x1f60a;最喜欢的座右…...

多个 Github 账户访问 Github

文章目录 多个 Github 账户访问 Github背景步骤 参考 多个 Github 账户访问 Github 背景 如果我想在这台电脑上同时使用两个 Github 账号怎么办呢&#xff1f; 你主机上的 SSH 公钥只能标识出一个账号。如果需要使用另外一个git账号&#xff0c;访问仓库&#xff0c;你需要创…...

c#实现命令模式

下面是一个使用C#实现命令模式的示例代码&#xff1a; using System; using System.Collections.Generic;// 命令接口 public interface ICommand {void Execute();void Undo(); }// 具体命令&#xff1a;打开文件 public class OpenFileCommand : ICommand {private FileMana…...

Kubernetes的默认调度和自定义调度详解

默认调度和自定义调度详解 默认调度 默认调度是 Kubernetes 中的内置机制&#xff0c;它使用调度器组件来管理分配容器的节点。调度器依据以下原则选择合适的节点&#xff1a; 资源需求 &#xff1a;调度器会为每个 Pod 根据其 CPU 和内存需求选择一个具有足够资源的节点。亲…...

【2026奇点大会AI游戏开发核心洞察】:5大原生架构范式、3个已落地商业案例与2027技术演进路线图

第一章&#xff1a;2026奇点智能技术大会&#xff1a;AI原生游戏开发 2026奇点智能技术大会(https://ml-summit.org) 本届大会首次设立“AI原生游戏开发”主题分会场&#xff0c;聚焦模型即引擎&#xff08;Model-as-Engine&#xff09;范式演进——游戏逻辑、角色行为、关卡…...

【紧急预警】传统音视频微服务架构将在2026Q3大规模失效——SITS2026原生处理标准已强制嵌入工信部信创目录

第一章&#xff1a;SITS2026分享&#xff1a;AI原生音视频处理 2026奇点智能技术大会(https://ml-summit.org) AI原生音视频处理正从“AI辅助”迈向“AI驱动”的范式跃迁——模型不再仅作为后处理模块嵌入传统管线&#xff0c;而是从采集、编码、传输到渲染的全链路深度重构。…...

3种实用方法:使用MediaCreationTool.bat绕过Windows 11硬件限制完全指南

3种实用方法&#xff1a;使用MediaCreationTool.bat绕过Windows 11硬件限制完全指南 【免费下载链接】MediaCreationTool.bat Universal MCT wrapper script for all Windows 10/11 versions from 1507 to 21H2! 项目地址: https://gitcode.com/gh_mirrors/me/MediaCreationT…...

使用小龙虾来操作猿编程的遥控车钾

一、什么是 Q 饱和运算&#xff1f; 1. 核心痛点&#xff1a;普通运算的 “数值回绕” 普通算术运算&#xff08;如 ADD/SUB&#xff09;溢出时&#xff0c;数值会按补码规则 “回绕”&#xff0c;导致结果完全错误&#xff1a; 示例&#xff1a;int8_t 类型最大值 127 1 → 结…...

某型高速可回收模块化靶标无人机总体设计方案

1. 总体设计1.1 项目概述与设计目标本方案面向新一代防空武器系统测试、训练需求的高性能靶标无人机。其核心任务是逼真模拟典型高速突防空中威胁&#xff08;如巡航导弹、战斗轰炸机等&#xff09;的飞行特性、电磁特征与机动模式&#xff0c;为防空部队提供高价值、高强度、低…...

第16讲:C语⾔内存函数

目录 memcpy使⽤memmove使⽤memset函数的使⽤memcmp函数的使⽤1.memcpy&#xff08;1&#xff09;功能&#xff1a; memcpy 是完成内存块拷⻉的&#xff0c;不关注内存中存放的数据是啥。函数 memcpy 从 source 的位置开始向后复制 num 个字节的数据到 destination 指向的内存位…...

充电宝选取建议全流程教程

9个步骤精准挑选。充电宝选取没有统一标准&#xff0c;按自身使用场景匹配参数&#xff0c;才能选到实用又安全的产品。本教程适用于日常出行、办公、旅行等多种场景&#xff0c;通过完整步骤与避坑方法&#xff0c;帮助用户掌握充电宝选取核心逻辑&#xff0c;挑选到容量、功率…...

Shiftbrite驱动库:A6281 RGB LED矩阵的12位级联控制方案

1. Shiftbrite 驱动库技术解析&#xff1a;面向高精度RGB LED矩阵的串行级联控制方案1.1 技术定位与工程价值Shiftbrite 是一款专为基于Allegro A6281&#xff08;或兼容芯片如TLC5940、LPD6803&#xff09;三通道恒流LED驱动芯片设计的嵌入式C/C驱动类库。其核心价值不在于提供…...

RAG详解:让大模型看见你的私有知识

本文已收录至GitHub&#xff0c;推荐阅读 &#x1f449; Java随想录 文章目录为什么需要 RAG知识的局限性幻觉问题数据安全RAG 的破局思路RAG 的技术架构数据准备阶段&#xff1a;构建知识的向量化索引应用阶段高级 RAG 技术搜索索引的演进混合搜索内容增强HyDE&#xff1a;假设…...

如何掌握IntelliJ Rust插件的Cargo项目结构:从入门到精通

如何掌握IntelliJ Rust插件的Cargo项目结构&#xff1a;从入门到精通 【免费下载链接】intellij-rust Rust plugin for the IntelliJ Platform 项目地址: https://gitcode.com/gh_mirrors/in/intellij-rust IntelliJ Rust插件是IntelliJ平台上的Rust开发工具&#xff0c…...