【Vue】图片切换

 上一篇: vue的指令

https://blog.csdn.net/m0_67930426/article/details/134599378?spm=1001.2014.3001.5502

本篇所需要的指令有: v-on   v-bind  v-show

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>.image img{width: 400px;height: 200px;}
</style><body><!--准备容器  -->
<div id="app"><button v-show="index>0" @click="index--">上一张</button><div  class="image"><img v-bind:src="list[index]" alt=""></div><button v-show="index<list.length-1" @click="index++">下一张</button>
</div><!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><!-- 创建实例 -->
<script>
/*    Vue.config.productionTip =false;*/var  app=new Vue({el:'#app',data:{index: 1,list:['./images/damo.jpg','./images/direnjie.jpg','./images/hanxin.jpg','./images/juyoujing.jpg','./images/lixin.jpg',]}});
</script>
</body>
</html>

使用的指令有 v- show    v-bind   v-on(@)

<style>.image img{width: 200px;height: 100px;}
</style>

将图片的宽设置为400px    高设置了200px

准备了几张图片

点击下一张

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

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

相关文章

人力资源管理后台 === 角色管理

目录 1.组织架构-编辑部门-弹出层获取数据 2.组织架构-编辑部门-编辑表单校验 3.组织架构-编辑部门-确认取消 4.组织架构-删除部门 5.角色管理-搭建页面结构 6.角色管理-获取数据 7.角色管理-表格自定义结构 8.角色管理-分页功能 9.角色管理-新增功能弹层 10.角色管理…

2024年天津天狮学院市场营销专业《管理学》考试大纲

2024年天津天狮学院专升本市场营销专业高职升本入学考试《管理学》考试大纲 一、考试性质 《管理学》专业课程考试是天津天狮学院市场营销专业高职升本入学考试的必考科 目之一&#xff0c;其性质是考核学生是否达到了升入本科继续学习的要求而进行的选拔性考试。《管理学》考…

5、Hydra与Crunch基本使用

文章目录 一、关于Hydra与Crunch二、在操作机上使用Crunch生成用户名和密码字典三、在操作机上使用Hydra对靶机FTP登录密码进行字典攻击 一、关于Hydra与Crunch Hydra&#xff08;九头蛇&#xff09;是一个相当强大的暴力密码破解工具。该工具支持几乎所有协议的在线密码破解&…

目录树自动生成器 golang+fyne

go tree 代码实现请看 gitee 仓库链接 有很多生成目录树的工具&#xff0c;比如windows自带的tree命令&#xff0c;nodejs的treer&#xff0c;tree-cli等等。这些工具都很成熟、很好用&#xff0c;有较完善的功能。 但是&#xff0c;这些工具全部是命令式的&#xff0c;如果…

解密 sqli靶场第一关:一步一步学习 SQL 注入技术

目录 一、判断是否存在注入点 二、构造类似?id1 --的语句 三、判断数据表中的列数 四、使用union联合查询 五、使用group_concat()函数 六、爆出数据库中的表名 七、爆出users表中的列名 八、爆出users表中的数据 &#x1f308;嗨&#xff01;我是Filotimo__&#x1f308;。很…

Matlab数学建模算法详解之混合整数线性规划 (MILP) 算法(附完整实现代码)

&#x1f517; 运行环境&#xff1a;Matlab &#x1f6a9; 撰写作者&#xff1a;左手の明天 &#x1f947; 精选专栏&#xff1a;《python》 &#x1f525; 推荐专栏&#xff1a;《算法研究》 #### 防伪水印——左手の明天 #### &#x1f497; 大家好&#x1f917;&#x1f91…

每天一点python——day76

#每天一点Python——76 #函数的返回值 函数的返回值&#xff1a; 如果函数的运行结果需要在其他函数中使用&#xff0c;那么这个函数就应该被定义为带返回值的函数 函数的运行结果使用return关键字进行返回 返回到函数的调用处 例子 def a(a,b):cabreturn c a(10,20)return可以…

java多线程一

1、什么是线程 线程&#xff08;Thread&#xff09;是一条程序内部的一条执行流程。 程序中如果只有一条执行流程&#xff0c;那这个程序就是单线程的程序。 2、什么是多线程 多线程&#xff08;multithreading&#xff09;&#xff0c;是指从软件或者硬件上实现多个线程并发执…

Flask Paginate实现表格分页

flask_paginate 是 Flask 框架的一个分页扩展&#xff0c;用于处理分页相关的功能。它可以帮助你在 Flask Web 应用程序中实现分页功能&#xff0c;让用户可以浏览大量数据的不同部分。本篇博文重点讲述在Web开发中&#xff0c;用paginate把所有数据进行分页展示&#xff0c;首…

【SAS Planet 下载地图瓦片-读取】

SAS Planet下载地图瓦片请看上一篇 详细介绍了下载方法 【SAS Planet 下载地图瓦片】-CSDN博客 准备工作&#xff1a; 1.提前下载好地图瓦片数据 SAS Planet下载地图瓦片默认存储路径如下 默认存储格式为 .sqlitedb 2.提前准备好 java开发环境和开发工具&#xff0c;新建 一个…

第五题-kotori和素因子【第六届传智杯程序设计挑战赛解题分析详解复盘】(JavaPythonC++实现)

🚀 欢迎来到 ACM 算法题库专栏 🚀 在ACM算法题库专栏,热情推崇算法之美,精心整理了各类比赛题目的详细解法,包括但不限于ICPC、CCPC、蓝桥杯、LeetCode周赛、传智杯等等。无论您是刚刚踏入算法领域,还是经验丰富的竞赛选手,这里都是提升技能和知识的理想之地。 ✨ 经典…

安卓吸顶效果

当列表滑动时&#xff0c;图片逐渐消失&#xff0c;toolBar悬停在头部。 <?xml version"1.0" encoding"utf-8"?><androidx.coordinatorlayout.widget.CoordinatorLayoutxmlns:android"http://schemas.android.com/apk/res/android"x…

网络运维与网络安全 学习笔记2023.11.26

网络运维与网络安全 学习笔记 第二十七天 今日目标 NAT场景与原理、静态NAT、动态NAT PAT原理与配置、动态PAT之EasyIP、静态PAT之NAT Server NAT场景与原理 项目背景 为节省IP地址和费用&#xff0c;企业内网使用的都是“私有IP地址” Internet网络的组成设备&#xff0c…

Python自动化测试学习路线【进阶必看】

软件自动化测试的学习步骤 大概步骤如下&#xff1a; 1. 做好手工测试&#xff08;了解各种测试的知识&#xff09;-> 2. 学习编程语言-> 3. 学习Web基础&#xff08;HTML,HTTP,CSS,DOM,Javascript&#xff09;或者 学习Winform -> 4. 学习自动化测试工具 ->5.…

Cisco Packet Tracer配置命令——路由器篇

路由基础 路由器用于互联两个或多个网络&#xff0c;具有两项功能&#xff1a;为要转发的数据包选择最佳路径以及将数据包交换到正确的端口&#xff0c;概括为路由选择和分组转发。 路由选择 路由选择就是路由器根据目的IP地址的网络地址部分&#xff0c;通过路由选择算法确…

java多线程任务并发问题:任务并行和任务并发有什么区别?

1.什么是任务并行&#xff1f; 多个任务在同一时刻同时运行&#xff0c;通常需要多个处理器或者多核处理器来实现。例如一个计算机可以同时执行多个程序、多个线程、多个进程时&#xff0c;就是采用并行的方式来处理任务的&#xff0c;有效提高计算机处理效率&#xff1b; 2.…

C++中在什么情况下使用共用体

C中在什么情况下使用共用体 在结构中&#xff0c;常使用共用体来模拟复杂的数据类型。共用体可将固定的内存空间解释为另一种类型&#xff0c;有些实现利用这一点进行类型转换或重新解释内存&#xff0c;但这种做法存在争议&#xff0c;而且可采用其他替代方式。如下示例程序演…

公司人事管理系统

1.问题描述 一个小公司包含四类人员&#xff1a;经理&#xff0c;技术人员&#xff0c;销售人员和销售经理&#xff0c;各类人员的工资计算方法如下&#xff1a;经理&#xff1a;固定月薪&#xff08;8000&#xff09;&#xff1b;技术人员&#xff1a;月薪按技术等级&#xf…

类与对象——(1)初识对象——C++中的string

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd; 或许不安或许迷惑&#xff0c;但…

Python与设计模式--解释器模式

20-Python与设计模式–解释器模式 一、模拟吉他 要开发一个自动识别谱子的吉他模拟器&#xff0c;达到录入谱即可按照谱发声的效果。除了发声设备外&#xff08;假设已完成&#xff09;&#xff0c; 最重要的就是读谱和译谱能力了。分析其需求&#xff0c;整个过程大致上分可…