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

点击切换图片的本质,其实修改的是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树里面移除,性能的消耗而言会大一些,不建议使用。 

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

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

相关文章

国标GB28181视频监控平台EasyGBS视频无法播放,抓包返回ICMP是什么原因?

国标GB28181视频平台EasyGBS是基于国标GB/T28181协议的行业内安防视频流媒体能力平台&#xff0c;可实现的视频功能包括&#xff1a;实时监控直播、录像、检索与回看、语音对讲、云存储、告警、平台级联等功能。国标GB28181视频监控平台部署简单、可拓展性强&#xff0c;支持将…

Python原型模式介绍、使用;浅拷贝/深拷贝原理

一、Python原型模式&#xff08;Prototype Pattern&#xff09;简介 1. 概念 原型模式是一种创建型设计模式&#xff0c;它通过复制&#xff08;克隆&#xff09;现有对象来创建新对象。这样可以避免使用复杂的构造函数来创建对象&#xff0c;提高程序的性能和可维护性。 2. 功…

腾讯云tke-ingress开启ingress域名访问日志

容器类型为containers的tke集群控制台创建完ingress-controller之后&#xff0c;由于默认日志是打印在pod内的文件&#xff0c;现在需要自行收集访问日志&#xff0c;需要把日志打印在正常的pod输出上在收集 在ingress-controller中默认nginx配置为 access-log-path: /var/log…

redis 缓存穿透 缓存击穿 缓存雪崩

redis 缓存穿透 缓存击穿 缓存雪崩 1.缓存穿透 前提&#xff1a;应用服务器压力过大 > 导致redis命中率过低&#xff08;查询不到缓存&#xff09;> 一直查询数据库 描述&#xff1a;1.redis查询不到数据 2.出现很多非正常url访问&#xff08;一般出现这些问题都是恶意…

独立站运营简历怎么写?如何做自建站履历?编写独立站经营履历的要点是什么?如何在简历中呈现个人自建站运营经验?

作为一名独立站运营者&#xff0c;一份出色的简历是展示自己能力的重要途径。一个精心制作的独立站运营简历可以为宝子们赢得心仪职位的机会。接下来&#xff0c;我们将介绍如何写一份引人注目的独立站运营简历&#xff0c;从而吸引雇主的目光。 独立站运营简历&#xff1a;个…

微服务——统一网关Getway

为什么需要网关&#xff1f; 网关的两种实现: 网关Getway——快速入门 步骤一 网关背身也是一个微服务&#xff0c;需要注册到nacos中去 步骤二 成功运行后 可以通过网关进行请求转发到对应服务。 流程如下&#xff1a; 路由断言工厂 网关路由可以配置的东西有如下。 spri…

【深度学习】yolov 图片训练的时候的遇到的warning: corrupt JPEG restored and saved

报错原因 是图片在dataset.py 走验证时报的错误。 if im.format.lower() in (jpg, jpeg):with open(im_file, rb) as f:f.seek(-2, 2)if f.read() ! b\xff\xd9: # corrupt JPEGImageOps.exif_transpose(Image.open(im_file)).save(im_file, JPEG, subsampling0, quality100)m…

Redis 九种数据类型的基本操作

一、redis9种数据类型的基本操作 ①key操作 #查找所有的key 127.0.0.1:6379> keys * 1) "pop" 2) "mylist" 3) "lpl" 4) "myset" #设置key的过期时间 返回1表示执行成功&#xff0c;0表示失败&#xff0c;出现问题 127.0.0.1:6379…

Qt Creator mainwindow.obj:-1: error: LNK2019

构建的时候报错&#xff1a; mainwindow.obj:-1: error: LNK2019: 无法解析的外部符号 "public: __thiscall mynotedig::mynotedig(class QWidget *)" (??0mynotedigQAEPAVQWidgetZ)&#xff0c;该符号在函数 "public: void __thiscall MainWindow::mynoteab…

VMPWN的入门级别题目详解(一)

实验一 VMPWN1 题目简介 这是一道基础的VM相关题目&#xff0c;VMPWN的入门级别题目。前面提到VMPWN一般都是接收字节码然后对字节码进行解析&#xff0c;但是这道题目不接受字节码&#xff0c;它接收字节码的更高一级语言&#xff1a;汇编。程序直接接收类似”mov”、”add”…

前端面试题:探索前沿技术与知识深度的关键

在前端开发领域&#xff0c;面试是评估候选人技能和知识水平的重要环节。面试题涵盖了各个方面的前端知识&#xff0c;旨在考察候选人的理解能力和解决问题的能力。本文将介绍一些常见的前端面试题&#xff0c;并结合具体实例说明&#xff0c;帮助读者更好地理解和准备前端面试…

Dockerfile 创建镜像,构建LNMP+wordpress架构

目录 一、Dockerfile 构建镜像 1.Dockerfile 构建 nginx镜像 1.1创建 nginx Dockerfile 目录 1.2编写 Dockerfile 文件 1.3构建nginx镜像 2.Dockerfile 构建 mysql 镜像 2.1创建 mysql Dockerfile 目录 2.2修改mysql配置文件 2.3编写 Dockerfile 文件 2.4构建mysql镜…

[论文笔记] LLM数据集——金融数据集

一、chatglm_金融 ModelScope 魔搭社区 请将modelscope sdk升级到v1.7.2rc0&#xff0c;执行&#xff1a; ​ pip3 install "modelscope1.7.2rc0" -f https://modelscope.oss-cn-beijing.aliyuncs.com/releases/repo.html # 方式1 git clone http://www.modelscope…

Cesium态势标绘专题-圆角矩形(标绘+编辑)

标绘专题介绍:态势标绘专题介绍_总要学点什么的博客-CSDN博客 入口文件:Cesium态势标绘专题-入口_总要学点什么的博客-CSDN博客 辅助文件:Cesium态势标绘专题-辅助文件_总要学点什么的博客-CSDN博客 本专题没有废话,只有代码,代码中涉及到的引入文件方法,从上面三个链…

[RabbitMQ] RabbitMQ简单概述,用法和交换机模型

MQ概述&#xff1a; Message Queue(消息队列)&#xff0c;实在消息的传输过程中保存消息的容器&#xff0c;都用于分布式系统之间进行通信 分布式系统通信的两种方式&#xff1a;直接远程调用 和 借助第三昂 完成间接通信 发送方称谓生产者&#xff0c;接收方称为消费者 MQ优…

JMeter基础入门教程之CSV数据文件设置CSV Data Set Config

最近在做压力测试&#xff0c;登录功能用到了配置元件&#xff1a;CSV 数据文件设置&#xff0c;可以将登录用户名和密码放在一个csv文件中&#xff0c;然后通过CSV数据文件设置元件读取出来&#xff0c;用来做压测。 一、CSV文件 CSV文件小知识分享&#xff1a;是指"逗号…

POC CPU 单核性能基准测试 Linux bash 下的简单测试用例 bc计算兀

指令 time echo "scale5000;4*a(1)" | bc -l -q 通过耗时简单评估CPU单核性能 测试环境一 yeqiangyeqiang-MS-7B23:/opt/cpu2006$ cat /etc/os-release PRETTY_NAME"Ubuntu 22.04.2 LTS" NAME"Ubuntu" VERSION_ID"22.04" VERSION&…

leetcode 620. 有趣的电影

# Write your MySQL query statement below select * from Cinema where id%21 and description !boring order by rating descid%21是筛选奇数的条件description !‘boring’ 是筛选不无聊的条件order by rating desc 按评分由大到小排序

Ubuntu 下安装软件,卸载,查看已经安装的软件

参考网址&#xff1a;http://wiki.ubuntu.org.cn/UbuntuSkills 一般的安装程序用三种&#xff1a; .deb 和.rpm 这两种安装文件 .bundle 这是二进制的安装文件  而 tar.gz 这类的只是压缩包&#xff08;相当于 .rar,.zip 压缩包一样&#xff09;,如果此类文件是程序的话&a…

BP神经网络数据分类——语音特征信号分类(Matlab代码实现)

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f468;‍&#x1f4bb;4 Matlab代码 &#x1f4a5;1 概述 BP神经网络是一种常见的人工神经网络&#xff0c;用于数据分类和回归等任务。在语音特征信号分类中&#xff0c;BP神经网络可…