项目实训-vue(十三)

项目实训-vue(十三)

文章目录

  • 项目实训-vue(十三)
    • 1.概述
    • 2.处理按钮

1.概述

本篇博客将记录我在图片上传页面中的工作。

2.处理按钮

实现了图片的上传之后,还需要设置具体的上传按钮。
在这里插入图片描述
这段代码使用 Element UIel-button 组件创建了两个圆角按钮,分别用于上传和清空图片。当 showReturnImagefalse 时,这些按钮显示在界面上。第一个按钮配置了 upload() 方法,当用户点击时,触发上传图片的功能;第二个按钮配置了 clear() 方法,当用户点击时,触发清空图片的功能。通过 v-show 指令控制按钮的显示,按钮样式包括圆角、固定尺寸和图标,提供了用户友好的图片上传和管理功能。
当他们被点击时,会执行以下函数:
在这里插入图片描述
在这里插入图片描述
最终实现效果如下:
在这里插入图片描述
可以看到实现了比较好看的前端页面。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/860095.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring学习02-[Spring容器核心技术IOC学习]

Spring容器核心技术IOC学习 什么是bean?如何配置bean?Component方式bean配合配置类的方式import导入方式 什么是bean? 被Spring管理的对象就是bean,和普通对象的区别就是里面bean对象里面的属性也被注入了。 如何配置bean? Component方式、bean配合配置类的方式、import…

C语言 | Leetcode C语言题解之第190题颠倒二进制位

题目: 题解: const uint32_t M1 0x55555555; // 01010101010101010101010101010101 const uint32_t M2 0x33333333; // 00110011001100110011001100110011 const uint32_t M4 0x0f0f0f0f; // 00001111000011110000111100001111 const uint32_t M8…

【containerd】Containerd高阶命令行工具nerdctl

前言 对于习惯了使用docker cli的用户来说,containerd的命令行工具ctr使用起来不是很顺手,此时别慌,还有另外一个命令行工具项目nerdctl可供我们选择。 nerdctl是一个与docker cli风格兼容的containerd的cli工具。 nerdctl已经作为子项目加入…

秋招突击——6/24——复习{完全背包问题——买书,状态转换机——股票买卖V}——新作{两数相除,LRU缓存实现}

文章目录 引言复习完全背包问题——买书个人实现 状态转换机——股票买卖V个人实现参考实现 新作两数相除个人实现 新作LRU缓存实现个人实现unordered_map相关priority_queue相关 参考实现自己复现 总结 引言 今天知道拼多多挂掉了,难受,那实习就是颗粒无…

汪汪队短视频:成都柏煜文化传媒有限公司

汪汪队短视频:萌宠与冒险的交织乐章 在数字时代的浪潮中,短视频以其短小精悍、内容丰富的特点,迅速占领了人们的闲暇时光。而在这些琳琅满目的短视频中,有一类作品以其独特的魅力吸引了无数观众的目光,那就是以萌宠为…

单门户上集成多种数据库查询入口

(作者:陈玓玏) 开源项目,欢迎star哦,https://github.com/tencentmusic/cube-studio 在一家公司,我们通常会有多种数据库,每种数据库因为其特性承担不同的角色,比如mysql这种轻量…

AI-024人工智能指数报告(三):经济

概述 人工智能融入经济会引发许多很迷人的问题。有人预测人工智能会推动生产力得到改进,但其影响程度仍未确定。其中一个主要关切是大规模劳动替代的可能性——工作究竟会在多大程度上被自动化还是人工智能主要起到增强作用?各个行业的企业已经在用各种…

基于FPGA的温湿度检测

初始化部分就不过多赘述,我会给出对应的文件,我只说明这部分里面涉及到使用的代码部分 1、数据的读取和校验 数据的读取和检验代码如下 always (posedge clk_us)if (data_temp[7:0] data_temp[39:32] data_temp[31:24] data_temp[23:16] data_te…

SpringBoot+Vue集成富文本编辑器

1.引入 我们常常在各种网页软件中编写文档的时候,常常会有富文本编辑器,就比如csdn写博客的这个页面,包含了富文本编辑器,那么怎么实现呢?下面来详细的介绍! 2.安装wangeditor插件 在Vue工程中,…

基于 SpringBoot + Vue 的图书购物商城项目

本项目是一个基于 SpringBoot 和 Vue 的图书购物商城系统。系统主要实现了用户注册、登录,图书浏览、查询、加购,购物车管理,订单结算,会员折扣,下单,个人订单管理,书籍及分类管理,用…

PCL 使用列文伯格-马夸尔特法计算变换矩阵

目录 一、算法原理1、计算过程2、主要函数3、参考文献二、代码实现三、结果展示本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫与GPT。 一、算法原理 1、计算过程 2、主要函数 void pcl

EXCEL快速填充空白内容

** EXCEL快速填充空白内容 ** 1.全选所有需要填充的内容,按住电脑的F5或者CTRLG点击定位 2.可以看到空白处被自动选定,之后按电脑和⬆,最后CTRLenter 可以看到空白处已经被填充。

计网入门还没到放弃

TCP报文段格式 源端口:标识报文的返回地址 目的端口:指明计算机上的应用程序接口 序号:通过SYN包传给接收端主机,每传送一次就1,用来解决网络包乱序的问题。 确认号:期望下一次收到的数据的序列号&#xff…

酷开科技用酷开系统打造数字化家庭娱乐与教育的新天地

家庭教育的重要性不言而喻,俗话说:父母是孩子的第一任老师,也是终生的老师。一个人是否能够成长成才,家庭教育是基础和前提,学校教育能够起到促进和引导作用,社会教育也会对一个人的成长产生重要影响。在数…

【YOLOv5/v7改进系列】引入PConv——轻量快速的卷积块

一、导言 《奔跑吧,别走:追求更高的FLOPS以实现更快的神经网络》,主要探讨了如何设计快速且高效的神经网络模型。文章指出,尽管许多研究致力于减少浮点运算次数(FLOPs)来提升模型速度,但FLOPs的减少并不直接等同于延迟…

Zookeeper部署

Zookeeper部署 下载安装包Linux解压安装包修改配置文件编辑zoo.cf配置 启动服务停止服务常用zookeeper指令查看namespace列表创建namespace删除namespace 注意:该文章为简单部署操作,没有复杂的配置内容,用的是3.7.2版本。 下载安装包 进入z…

python爬虫需要什么HTTP代理?

用来爬虫的话,还是建议用高匿名代理,但显然题主用了高匿名代理还是出现了一部分问题,我们可以先找到问题关键再解决它,一般爬虫用了高匿名代理出现被封会有以下几种原因: 1.代理IP的质量不过关 一般来说每个网站都有…

秋招突击——6/20——复习{(单调队列优化)——最大子序列和,背包问题——宠物小精灵收服问题}——新作{两两交换链表中的节点}

文章目录 引言复习单调队列优化——最大子序列和思路分析实现代码参考实现 背包问题——宠物小精灵的收服问题个人实现参考实现 新作两两交换链表中的节点个人实现参考实现 删除有序数组中的重复项个人实现知识补全迭代器的访问和控制vector删除特定的元素erasevector底层删除元…

PHP 数组排序详解与实例

在PHP编程中,数组是一种非常常见和重要的数据结构,而对数组进行排序则是处理和展示数据时必不可少的操作之一。本文将详细介绍PHP中数组排序的各种方法、函数和示例,帮助您掌握如何根据不同需求对数组进行排序。 1. PHP 中的数组排序函数 PH…

Consul入门笔记

简介 Consul,HashiCorp公司推出的开源工具,用于实现分布式系统的服务发现与配置。与其他分布式服务注册与发现的方案,Consul的方案更一站式,内置服务注册与发现框架、分布一致性协议实现、健康检查、K/V存储、多数据中心方案&…