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

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

news 2026/4/7 1:06:35

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

Alienware硬件深度控制：开源工具的技术实现方案

Alienware硬件深度控制&#xff1a;开源工具的技术实现方案 【免费下载链接】alienfx-tools Alienware systems lights, fans, and power control tools and apps 项目地址: https://gitcode.com/gh_mirrors/al/alienfx-tools Alienware硬件控制工具集&#xff08;Alien…...

编程新知 2026/4/7 0:31:30

5分钟搞定Asterisk SIP服务器：Ubuntu下从安装到Linphone客户端配置全流程

零基础构建企业级VoIP通信系统&#xff1a;Asterisk与Linphone实战指南 1. VoIP技术与企业通信系统架构解析 在数字化办公场景中&#xff0c;VoIP&#xff08;Voice over Internet Protocol&#xff09;技术正在彻底改变传统通信方式。与PSTN&#xff08;公共交换电话网络&…...

编程新知 2026/4/7 0:29:30

Kali 2025.4上部署HexStrike AI踩坑实录：从MCP连接失败到完美运行的完整排错指南

Kali 2025.4上部署HexStrike AI踩坑实录&#xff1a;从MCP连接失败到完美运行的完整排错指南 HexStrike AI作为新一代AI驱动的渗透测试框架&#xff0c;理论上只需几条命令就能完成部署。但现实往往比文档复杂得多——特别是当你在深夜赶项目&#xff0c;却发现MCP客户端死活连…...

编程新知 2026/4/6 21:50:14

2026年在职研究生论文降AI工具推荐：理论与实践结合部分如何处理

2026年在职研究生论文降AI工具推荐&#xff1a;理论与实践结合部分如何处理 导师发消息说论文AI率超标的时候&#xff0c;我正在食堂吃饭。筷子都差点拿不稳。 后来用了三天时间研究在职研究生论文降AI&#xff0c;踩了不少坑但总算搞定了。最后稳定在用的就是嘎嘎降AI&#…...

编程新知 2026/4/6 21:50:14

9篇8章2节：MIMIC 数据库的 CITI 注册与课程选择（2026年版）

作为包含敏感患者信息的公共数据库，MIMIC 对使用权限的申请设置了严格的伦理与合规门槛，其核心目的在于保障患者隐私、维护学术诚信。其中，通过 CITI Program 的人体研究伦理认证是不可或缺的前置条件，也是衡量研究人员是否具备合规研究素养的关键标准。本文将详细拆解 202…...

编程新知 2026/4/6 21:46:13

深入解析wxappUnpacker：5个高效技巧还原微信小程序源码

深入解析wxappUnpacker&#xff1a;5个高效技巧还原微信小程序源码 【免费下载链接】wxappUnpacker 项目地址: https://gitcode.com/gh_mirrors/wxappu/wxappUnpacker 作为微信小程序开发者&#xff0c;你是否曾想深入了解优秀小程序的实现原理&#xff0c;或者需要分析…...

编程新知 2026/4/6 21:40:12

[具身智能-244]：OpenCV目标跟踪应用程序调用OpenCV库函数实现该功能的主要流程

OpenCV 目标跟踪应用程序的实现流程&#xff0c;本质上是“初始化&#xff08;定义目标&#xff09; -> 循环更新&#xff08;预测位置&#xff09; -> 可视化&#xff08;反馈结果&#xff09;”的过程。这一流程完美体现了之前提到的“逻辑推演模式”&#xff1a;程序员…...

编程新知 2026/4/6 20:27:24

【Docker】RedHat 7.9 企业级环境 Docker 部署实战与避坑指南

1. 企业级环境下的Docker部署挑战 在企业生产环境中部署Docker&#xff0c;尤其是像RedHat 7.9这样的传统Linux发行版&#xff0c;会遇到不少特有的挑战。我经历过多次这样的部署过程&#xff0c;深知其中可能遇到的坑。不同于个人开发环境&#xff0c;企业级部署需要考虑稳定性…...

编程新知 2026/4/6 18:58:43

高并发系统的“救命稻草”——BASE 理论

今天我们要聊的话题&#xff0c;是互联网架构的“遮羞布”&#xff0c;也是高并发系统的“救命稻草”——BASE 理论。如果说 ACID&#xff08;原子性、一致性、隔离性、持久性&#xff09;是传统数据库的“洁癖”&#xff0c;要求数据必须时刻保持完美&#xff0c;那 BASE 就是…...

编程新知 2026/4/6 17:35:30

终极GoogleTest死亡测试指南：如何轻松掌握程序异常退出测试技巧

终极GoogleTest死亡测试指南&#xff1a;如何轻松掌握程序异常退出测试技巧 【免费下载链接】googletest GoogleTest - Google Testing and Mocking Framework 项目地址: https://gitcode.com/GitHub_Trending/go/googletest GoogleTest&#xff08;Google Testing and …...

编程新知 2026/4/6 16:49:12