项目实训-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,一经查实,立即删除!

相关文章

Linux之磁盘管理

最近工作中,进行需要进行项目部署、排查问题。而磁盘又是其中绕不开的一个环节。今天就来整理一下磁盘的操作。 1、查看磁盘使用情况 df -h文件系统 容量 已用 可用 已用% 挂载点 devtmpfs 2.0G 0 2.0G 0% /dev tmpfs …

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已经作为子项目加入…

【区分vue2和vue3下的element UI Statistic 统计数值组件,分别详细介绍属性,事件,方法如何使用,并举例】

Element UI 是一个为 Vue.js 设计的 UI 组件库,但截至当前(2023年),Element UI 主要针对 Vue 2.x 进行了设计和开发,并没有官方的 Vue 3.x 版本。然而,Vue 3.x 带来了许多新的特性和改进,因此一…

es 更新索引mapping和setting

1.关闭索引 curl -X POST "localhost:9200/your_index_name/_close"2.修改setting 配置 无法更新一些默认数据,按照需求构建,我这边是构建增加了分词器 "settings": {"index": {"creation_date": "1718850346547…

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

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

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

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

【AI原理解析】—小型神经网络原理

目录 一、定义与特点 二、优化方法 三、性能评估 四、应用场景 五、工具与可视化 一、定义与特点 定义:微型神经网络(轻量级神经网络)是指那些需要参数数量较少、计算代价较小的神经网络模型。特点: 参数数量少:…

YOLOv8 目标检测程序的输出 (1, 84, 8400)的解释

YOLOv8 目标检测程序的输出 (1, 84, 8400)的解释 flyfish 完整代码请看 # 使用预处理后的图像数据进行推理 outputs session.run(None, {model_inputs[0].name: img_data})也就是这个outputs 输出结果代表什么 outputs session.run(None, {model_inputs[0].name: img_dat…

CSS3 多列布局

CSS3 多列布局 CSS3 多列布局是一种强大的布局技术,它允许开发者将内容分为多个列,类似于报纸或杂志的布局。这种布局方式不仅提高了页面设计的灵活性,还增强了用户阅读体验。本文将详细介绍 CSS3 多列布局的相关属性,并通过示例展示其应用。 多列布局的基本概念 在 CSS…

Android :unable to instantiate application

前言 如题 app在运行的时候,打开就崩溃了。 错误日志:Android :unable to instantiate application. 以下是原因分析和解决方法: 可能原因1: 可能是com.xxx.xxx.MyApplication路径配置错误了,在移动完文件的时候&a…

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

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

ECharts 响应式设计

ECharts 响应式设计 ECharts 是一个由百度开源的,基于 JavaScript 的可视化库,它提供了一系列丰富的图表类型和灵活的配置选项,使得数据可视化变得简单而高效。在当今数据驱动的世界中,ECharts 已经成为许多开发者和设计师的首选工具,用于创建交互式和视觉吸引力强的图表…

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

深度分析SQL与NoSQL数据库:优缺点、使用场景及选型指南

在大数据和云计算时代,数据库技术的发展日新月异。SQL(关系型数据库)和NoSQL(非关系型数据库)作为两大主流数据库技术,各有其独特的优势和使用场景。本文将深入分析SQL和NoSQL的定义、优缺点、使用场景&…