vue移动端图片放大效果实现(vue实现图片切换效果)
类别:编程学习 浏览量:2145
时间:2021-10-22 07:20:03 vue移动端图片放大效果实现
vue实现图片切换效果本文实例为大家分享了vue实现图片切换效果的具体代码,供大家参考,具体内容如下
1)v-if/v-show
二者都可以实现让元素隐藏和显示。但是实现原理不同:
v-if 是通过将元素从dom树中移除和添加来实现元素的隐藏和显示效果。
v-show 是通过修改元素的displace值来实现元素的隐藏和显示效果。
2)v-bind
v-bind可以对元素的属性值进行修改。
基于这些背景知识,下面来实现图片切换实例。
功能需求
1)点击左边按钮,显示前一张图片;如果图片是第一张,则隐藏该按钮
2)点击右边按钮,显示后一张图片;如果图片是最后一张,则隐藏该按钮
实现代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片切换效果</title> <style> #test{ position: absolute; } #left{ position: absolute; top: 134px; z-index: 99; width: 24px; height: 32px; background-color: black; color: white; font-size: 24px; opacity: 0.6; cursor: pointer; } #right{ position: absolute; right: 0; top: 134px; z-index: 99; width: 24px; height: 32px; background-color: black; color: white; font-size: 24px; opacity: 0.6; cursor: pointer; } img{ width: 500px; height: 300px; } </style> </head> <body> <li id="test" > <li id="left" @click = "changeleft" v-if="lefttt"> < </li> <img v-bind:src = "'imgs/00'+num+'.jpg" alt="vue移动端图片放大效果实现(vue实现图片切换效果)" border="0" />
效果
1)显示第一张图片时
2)显示最后一张图片时
3)显示其他张图片时
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue实现聊天(Vue+ssh框架实现在线聊天)
- vue中的watch属性(vue Watch和Computed的使用总结)
- vue 如何执行动态js(如何利用vue.js实现拖放功能)
- mongovue的使用
- vue移动端返回在指定位置(vue移动端判断手指在屏幕滑动方向)
- vue用手动上传图片(vue上传图片文件的多种实现方法)
- vue离线地图有哪些(vue 集成腾讯地图实现api附DEMO)
- vue组件轮播(vue+rem自定义轮播图效果)
- vue实现树形结构菜单(vue递归实现三级菜单)
- vue应用转flutter(Vue和Flask通信的实现)
- ant design 的vue批量操作(ant desing vue table 实现可伸缩列的完整例子)
- vue 组件如何转换虚拟dom(Vue源码分析之虚拟DOM详解)
- vue代码和element用法(Vue Element前端应用开发之整合ABP框架的前端登录)
- vue-router的两种模式(vue-route路由管理的安装与配置方法)
- vue 富文本图片上传(vue.js云存储实现图片上传功能)
- vue和springboot分页开发实现(解决Vue+SpringBoot+Shiro跨域问题)
- Google 推出了一个游戏生成器,让不会编程的你也能自己设计游戏(推出了一个游戏生成器)
- 二胎家庭老大爱闹情绪,用这招很有效(二胎家庭老大爱闹情绪)
- 一个30岁男人外遇失败的全过程(一个30岁男人外遇失败的全过程)
- 《无敌破坏王2》 不聊彩蛋,聊聊我从动画里看到的现实那些事儿(无敌破坏王2不聊彩蛋)
- 《寄生虫》 三观不正 人类悲欢从来不相通,感同身受也并非本能(寄生虫三观不正)
- 这部动漫中的女孩子,可比101女孩更加励志(这部动漫中的女孩子)
热门推荐
- iis为什么找不到文件(iis 不能下载包含中文文件名的rar文件)
- 织梦标签怎么设置网站(织梦模板DEDECMS文章页实现让用户选择字体大小的代码的方法)
- mvc中Scripts.Render、Styles.Render
- docker compose的常用命令(安装docker和docker-compose实例详解)
- vue数据改变页面不刷新(vue列表数据删除后主动刷新页面及刷新方法详解)
- ubuntu常用命令表(Ubuntu服务器常用命令汇总)
- 阿里云ecs部门怎么样(阿里云ecs是什么意思?)
- 如何使用rem开发移动端页面(移动端rem布局的两种实现方法)
- python获取企业微信信息(通过shell+python实现企业微信预警)
- 如何用xampp新建数据库(Windows系统下XAMPP的安装配置图文教程)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9