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

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

news 2026/2/9 13:33:54

点击切换图片的本质，其实修改的是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

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2026/1/31 21:56:58

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2026/1/28 11:11:03

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

编程新知 2025/9/2 3:37:40

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

编程新知 2025/10/3 10:56:48

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...

编程新知 2026/1/30 4:58:21

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

编程新知 2026/2/2 11:58:16

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...

编程新知 2026/2/9 9:22:40

MFE(微前端) Module Federation：Webpack.config.js文件中每个属性的含义解释

以Module Federation 插件详为例&#xff0c;Webpack.config.js它可能的配置和含义如下&#xff1a; 前言 Module Federation 的Webpack.config.js核心配置包括&#xff1a; name filename&#xff08;定义应用标识&#xff09; remotes&#xff08;引用远程模块&#xff0…...

编程新知 2025/9/20 11:57:48

JDK 17 序列化是怎么回事

如何序列化&#xff1f;其实很简单&#xff0c;就是根据每个类型&#xff0c;用工厂类调用。逐个完成。 没什么漂亮的代码&#xff0c;只有有效、稳定的代码。 代码中调用toJson toJson 代码 mapper.writeValueAsString ObjectMapper DefaultSerializerProvider 一堆实…...

编程新知 2026/2/7 4:19:21

rm视觉学习1-自瞄部分

首先先感谢中南大学的开源&#xff0c;提供了很全面的思路&#xff0c;减少了很多基础性的开发研究 我看的阅读的是中南大学FYT战队开源视觉代码 链接&#xff1a;https://github.com/CSU-FYT-Vision/FYT2024_vision.git 1.框架&#xff1a; 代码框架结构&#xff1a;readme有…...

编程新知 2026/2/7 21:45:37