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

Vue 本地应用 图片切换 v-show v-bind实践

news 2025/7/20 20:51:22

点击切换图片的本质，其实修改的是img标签的src属性。

 图片的地址有很多个，在js当中通过数组来保存多个数据，数组的取值结合索引，根据索引可以来判断是否是第一张还是最后一张。

图片的变化本质是src属性被修改了，属性的修改使用v-bind指令。

a标签在点击的时候要执行逻辑，那么事件绑定是v-on，在第一张和最后一张图片隐藏某个a标签，因为切换的比较频繁，考虑到性能问题使用v-show指令。

首先要定义图片数组，在data当中定义data数组，将地址存储进去。

接着添加图片索引，如果是从数组第一个获取的话，那么值是0。

然后使用v-bind指令，将地址和img的src属性绑定，获取的方式其实就是数组+索引

点击上一张和下一张图片，本质是修改了索引的值，这部分的逻辑写在methods中，

下一张可以取名为pre next，逻辑简单，只需要去递增和递减索引就行了

左右箭头的显示条件略有不同，一个是不为第一张，索引不为0就行了。如果不为最后一张，只需要判断所应的长度比数组小，指令使用v-show。

 

 左边的按钮只需要索引不为0就可以使用了，为0相当于第一张。右边按钮只需要比数组的长度小就可以显示了。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>首页</title><link href="" type="text/css" rel="stylesheet"/><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><style type="text/css"></style>
</head><body>  
<div id="app"><!--现在是基于数据来生成src的属性--><button type="button" @click="pre" v-show="index!= 0">上一张</button><button type="button" @click="next" v-show="index<imgArr.length-1">下一张</button><img :src="imgArr[index]" alt="">
</div><script type="text/javascript">        new Vue({   el: "#app",   data:{ imgArr:["./1.jpg","./2.jpg","./3.jpg",],index: 0,},methods:{pre:function(){this.index--;},next:function(){this.index++;}}})</script></body>
</html>

这里使用v-if也是可以的。v-if是直接将元素从dom树里面移除，性能的消耗而言会大一些，不建议使用。 

相关文章：

Vue 本地应用 图片切换 v-show v-bind实践

点击切换图片的本质&#xff0c;其实修改的是img标签的src属性。 图片的地址有很多个&#xff0c;在js当中通过数组来保存多个数据&#xff0c;数组的取值结合索引&#xff0c;根据索引可以来判断是否是第一张还是最后一张。 图片的变化本质是src属性被修改了&#xff0c;属性…...

编程日记 2023/7/27 7:46:00

AI生成-- autocomplete 模糊搜索

el-autocomplete可以通过设置属性来实现模糊搜索功能。 首先需要设置一个搜索函数&#xff0c;即在输入框输入内容时会调用的函数&#xff0c;用来返回所有符合条件的结果。这个函数需要接收两个参数&#xff1a;输入框的值和一个回调函数。 <el-autocompletev-model"…...

编程日记 2023/7/27 7:44:59

怎么用手机做文字二维码？文本内容在线生成二维码技巧

手机端怎么将文字制作二维码呢&#xff1f;现在二维码是日常生活中经常会使用的一种工具&#xff0c;能够将不同的内容生成二维码使用&#xff0c;比如文本二维码就是常用的一种类型。那么当我们在没有电脑的情况下时&#xff0c;如何通过手机来快速生成二维码&#xff08;二维…...

编程日记 2023/7/27 7:43:58

【Ap模块EM】08-怎么让Execution Management成为第一个执行的进程？

前面的文章，我们讲述了ubuntu系统上电执行的流程，那么在Ap AutoSAR中Execution Management怎么成为第一个被执行的进程呢额？就是让它取代传统的init进程，成为ubuntu系统第一个执行的进程？ 我们可以通过符号链接 symbolic link去实现，这个类似于windows系统中的某个exe文件…...

编程日记 2023/7/27 7:42:57

使用vscode+platformio搭建arduino开发环境

存在的问题&#xff1a; Arduino编译时会将所有的C文件都编译一遍造成编译很慢&#xff0c;一个简单的工程稍加修改有可能都需要三四分钟才能编译完成&#xff0c;同时arduino也不支持代码跳转查看功能&#xff0c;不方便代码查看。 解决方法&#xff1a; 使用vscodeplatfor…...

编程日记 2023/7/27 7:41:56

java后端接口实现302跳转

正常来说&#xff0c;接口返回String是"redirect:"url或者“r:”url就能实现前端接收到返回后自动302.但是我在自己的一个项目中这么写了之后发现返回的是纯字符串&#xff0c;很奇怪。 最后发现&#xff0c;如果你的controller层有RestController注解&#xff0c;那…...

编程日记 2023/7/27 7:40:55

分布式理论：CAP理论 BASE理论

文章目录 1. CAP定理1.1 一致性1.2 可用性1.3 分区容错1.4 矛盾 2. BASE理论3. 解决分布式事务的思路4. 扩展 解决分布式事务问题&#xff0c;需要一些分布式系统的基础知识作为理论指导。 1. CAP定理 Consistency(一致性): 用户访问分布式系统中的任意节点&#xff0c;得到的…...

编程日记 2023/7/27 7:39:54

Tensorflow学习

一、处理数据的结构 案例代码如下: import tensorflow.compat.v1 as tf tf.disable_v2_behavior() import numpy as np# create data x_data np.random.rand(100).astype(np.float32) y_data x_data*0.1 0.3# 创建结构(一维结构) Weights tf.Variable(tf.random.uniform(…...

编程日记 2023/7/27 7:38:53

5-Ngnix配置基于用户访问控制和IP的虚拟主机

目录 5.1.Ngnix配置基于用户访问控制的多虚拟主机 5.1.1.前提条件 5.1.2.Ngnix配置基于用户访问控制的多虚拟主机 5.2.Ngnix配置基于IP的虚拟主机 5.3.Ngnix配置基于IP的多虚拟主机 Nginx配置文件在/usr/local/nginx/conf下&#xff0c;文件名为nginx.conf 5.1.Ngnix配置…...

编程日记 2023/7/27 7:37:52

springboot jar分离部署

springboot jar分离部署 注意&#xff1a;spring boot web项目别使用jsp页面&#xff0c;可以使用模板代替&#xff0c;jsp打包时访问页面会报404错误。 1.具体配置如下&#xff1a; <build><plugins><!--更换maven的jar打包插件先前使用的是spring-boot-mav…...

编程日记 2023/7/27 7:36:51

Opencv 细节补充

1.分辨率的解释 •像素&#xff1a;像素是分辨率的单位。像素是构成位图图像最基本的单元&#xff0c;每个像素都有自己的颜色。 •分辨率&#xff08;解析度&#xff09;&#xff1a; a) 图像分辨率就是单位英寸内的像素点数。单位为PPI(Pixels Per Inch) b) PPI表示的是每英…...

编程日记 2023/7/27 7:35:50

内存泄漏专题（7）hook之宏定义

前面介绍的mtrace也好&#xff0c;bcc也罢&#xff0c;其实都是hook技术的一种实现&#xff0c;但是mtrace本身使用场景上有局限&#xff0c;而bcc环境依赖则十分复杂。因此&#xff0c;这些调试手段只适用于开发环境用来调试&#xff0c;对于生产环境&#xff0c;均不是一个非…...

编程日记 2023/7/27 7:34:49

Python 基础（十八）：异常处理

❤️ 博客主页&#xff1a;水滴技术 &#x1f338; 订阅专栏&#xff1a;Python 入门核心技术 &#x1f680; 支持水滴&#xff1a;点赞&#x1f44d; 收藏⭐ 留言&#x1f4ac; 文章目录 一、异常是什么&#xff1f;二、异常处理的基本语法三、捕获特定的异常类型四、finall…...

编程日记 2023/7/27 7:33:48

iTOP-RK3568开发板Docker 安装 Ubuntu 18.04

Docker 下载安装 Ubuntu18.04&#xff0c;输入以下命令&#xff1a; sudo apt update docker pull ubuntu:18.04 切换 Shell 到 Ubuntu 18.04&#xff0c;输入以下命令&#xff1a; docker container run -p 8000:3000 -it ubuntu:18.04 /bin/bash -p 参数&#xff1a;容器的…...

编程日记 2023/7/27 7:32:45

FFmpeg AVFilter的原理（三）- filter是如何被驱动的

首先上官方filter的链接&#xff1a;https://ffmpeg.org/ffmpeg-filters.html 关于filter命令行&#xff1a;FFmpeg-4.0 的filter机制的架构与实现.之一 Filter原理 1、下面是一个avfilter的graph 上图是ffmpeg中doc/examples中filtering_video.c案例的示意图。 特别注意上面蓝…...

编程日记 2023/7/27 7:31:42

ARM day8 key1/2/3led

key_led.h #ifndef _KEY_H_ #define _KEY_H_#include "stm32mp1xx_rcc.h" #include "stm32mp1xx_gpio.h" #include "stm32mp1xx_exti.h" #include "stm32mp1xx_gic.h"//EXTI编号 typedef enum {EXTI0,EXTI1,EXTI2,EXTI3,EXTI4,EXTI5,…...

编程日记 2023/7/27 7:30:41

windows 系统安装sonarqube

SonarQube是一种自动代码审查工具&#xff0c;用于检测代码中的错误&#xff0c;漏洞和代码异味。它可以与您现有的工作流程集成&#xff0c;以便在项目分支和拉取请求之间进行连续的代码检查。 官方网站&#xff1a; https://www.sonarqube.org/ 1. 使用前提条件 运行SonarQ…...

编程日记 2023/7/27 7:29:40

Unity噪声图生成（编辑器扩展）

最近发现项目里很多shader都需要噪声图&#xff0c;&#xff08;shadergraph中有自己的噪声图生成&#xff09;当遇到需要噪声图时去寻找很麻烦&#xff0c;所以从网上查阅资料编写了一个Unity扩展的噪声图生成。 Perlin噪声 Perlin噪声是一种渐变噪声算法&#xff0c;由Ken …...

编程日记 2023/7/27 7:28:39

http-为什么文件上传要转成Base64

# 前言 最近在开发中遇到文件上传采用Base64的方式上传&#xff0c;记得以前刚开始学http上传文件的时候&#xff0c;都是通过content-type为multipart/form-data方式直接上传二进制文件&#xff0c;我们知道都通过网络传输最终只能传输二进制流&#xff0c;所以毫无疑问他们本…...

编程日记 2023/7/27 7:27:38

htmlCSS-----定位

目录 前言 定位 分类和取值 定位的取值 1.相对定位 2.绝对位置 元素居中操作 3.固定定位 前言 今天我们来学习html&CSS中的元素的定位&#xff0c;通过元素的定位我们可以去更好的将盒子放到我们想要的位置&#xff0c;下面就一起来看看吧&#xff01; 定位 定位posi…...

编程日记 2023/7/27 7:26:37

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

编程新知 2025/7/20 9:05:58

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/7/16 16:51:12

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2025/7/17 10:09:52

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

编程新知 2025/7/9 22:46:31

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/6/20 19:09:22

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

编程新知 2025/7/6 17:08:17

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/7/7 1:17:02

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2025/7/17 1:36:35

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/6/17 3:05:21

QT： `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

编程新知 2025/7/18 23:07:50