vuejs图片缩放裁切(vue+js点击箭头实现图片切换)
类别:编程学习 浏览量:190
时间:2021-10-21 07:17:08 vuejs图片缩放裁切
vue+js点击箭头实现图片切换本文实例为大家分享了vue+js点击箭头实现图片切换的具体代码,供大家参考,具体内容如下
前端需求是 返回的图片数据能够点击箭头切换
代码如下
<li class="pubuItemsBox"> <!-- 修改部分5.23晚 --> <template v-for="(orderEvent, index) in orderEventList" > <li :class="{'pubuItem':true, 'noMag':(index+1)%3 == 0}"> <li class="imglis"> <template v-if="orderEvent.eventFocuspic.split(',').length > 1"> <ins class="left" @click='change(index,"prev")'></ins> <ins class="right" @click='change(index,"next")'></ins> </template> <ul class="ulZpImg"> <template v-for="(imgUrl,imgUrlIndex) in orderEvent.eventFocuspic.split(',')" > <li v-show='imgUrlIndex===orderEvent.mark'><img :src="getImageUrl(showImg(imgUrl))"></li> </template> </ul> </li> <li class="txtBox"> <span>{{orderEvent.brandName}}</span><ins>档期:{{orderEvent.beginDate}}至{{orderEvent.endDate}}</ins> </li> <p style="-webkit-box-orient: vertical;">{{orderEvent.eventDesc}}</p> </li> </template> </li> <script> change(i, type){ var obj = this.orderEventList[i]; var imgLength =obj.eventFocuspic.split(',').length; if (type === "prev") { if (obj.mark == 0) { obj.mark = imgLength - 1 return } obj.mark--; } if (type === "next") { if (obj.mark == imgLength - 1) { obj.mark = 0 return } console.log(obj.mark) obj.mark++; } } </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue将弹框抽离成组件(vue3 可拖动的左右面板分割组件实现)
- vuephp后台开发框架(Vue+thinkphp5.1+axios实现文件上传)
- vue购物车简单项目(vue实现简单购物车案例)
- 使用vue组件开发项目(Vue记事本实例详解)
- vue封装一个功能函数(vue中利用mqtt服务端实现即时通讯的步骤记录)
- 小白vue教学(尤大大新活petite-vue的实现)
- vue跨域代理怎么写(解决vue $http的get和post请求跨域问题)
- vue 设置头部可以左右滑动(vue实现左右滑动效果实例代码)
- vue可以使用模态框modal吗(vue基于Teleport实现Modal组件)
- vue实现树形结构菜单(vue递归实现三级菜单)
- vueweb端聊天(Vue实现聊天界面)
- vue创建项目同时引入elementui(Vue Element前端应用开发之开发环境的准备工作)
- vue监控对象变化(Vue之监听方法案例详解)
- vue 修改后刷新(Vue使用三种方法刷新页面)
- ant design 的vue批量操作(ant desing vue table 实现可伸缩列的完整例子)
- vue项目有element插件(Vue Element前端应用开发之前端API接口的封装)
- 数学语文题目(语文的数学题)
- 香蕉(香蕉三种人不宜吃)
- 没钱可以快乐吗(没钱也能快乐吗)
- 快乐是什么(快乐就是)
- 东南亚有哪个国家(东南亚有哪个国家最发达)
- 东南亚安全吗(好不好挣钱)
热门推荐
- python编写的小程序(几个适合python初学者的简单小程序,看完受益匪浅!推荐)
- phpStudy启动失败时的解决方法 提示缺vc9运行库(phpStudy启动失败时的解决方法 提示缺vc9运行库)
- SQL Server中如何将数据导出为XML或Json文件
- python 装饰器模式(python重试装饰器的简单实现方法)
- docker进入容器的方法(在docker容器中安装vi命令的简单操作)
- 在css中用属性来实现文字环绕图片(css文字环绕图片—遇到的问题及快速解决方法)
- python3列表的使用教程(对Python3 pyc 文件的使用详解)
- docker入门搭建博客(快速掌握使用Docker搭建开发环境)
- mysql的连接代码(MySQL 连接查询的原理和应用)
- python异常值处理(一篇文章带你弄懂Python异常传递和自定义异常)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9