vue+js點(diǎn)擊箭頭實(shí)現(xiàn)圖片切換
本文實(shí)例為大家分享了vue+js點(diǎn)擊箭頭實(shí)現(xiàn)圖片切換的具體代碼,供大家參考,具體內(nèi)容如下
前端需求是 返回的圖片數(shù)據(jù)能夠點(diǎn)擊箭頭切換
代碼如下
<div class="pubuItemsBox"> <!-- 修改部分5.23晚 --> <template v-for="(orderEvent, index) in orderEventList" > <div :class="{'pubuItem':true, 'noMag':(index+1)%3 == 0}"> <div class="imgDivs"> <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> </div> <div class="txtBox"> <span>{{orderEvent.brandName}}</span><ins>檔期:{{orderEvent.beginDate}}至{{orderEvent.endDate}}</ins> </div> <p style="-webkit-box-orient: vertical;">{{orderEvent.eventDesc}}</p> </div> </template> </div> <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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3+TypeScript實(shí)現(xiàn)PDF預(yù)覽組件
這篇文章主要為大家詳細(xì)介紹了如何基于Vue3+TypeScript實(shí)現(xiàn)PDF預(yù)覽組件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04vue3中實(shí)現(xiàn)拖拽排序代碼示例(vue-draggable-next的使用)
在Vue3中使用拖拽功能時(shí)應(yīng)選用vue-draggable-next插件,傳統(tǒng)的draggable插件不兼容Vue3,可能導(dǎo)致TypeError錯(cuò)誤,安裝后,需在項(xiàng)目中引入并使用,具體步驟包括安裝插件、引入使用、查看效果和相關(guān)說(shuō)明,需要的朋友可以參考下2024-09-09一文詳解Vue響應(yīng)式數(shù)據(jù)的原理
在vue2的響應(yīng)式中,存在著添加屬性、刪除屬性、以及通過(guò)下標(biāo)修改數(shù)組,但頁(yè)面不會(huì)自動(dòng)更新的問(wèn)題,而這些問(wèn)題在vue3中都得以解決,本文就給大家詳細(xì)的介紹一下Vue響應(yīng)式數(shù)據(jù)原理,感興趣的小伙伴跟著小編一起來(lái)看看吧2023-08-08Vue 路由 過(guò)渡動(dòng)效 數(shù)據(jù)獲取方法
這篇文章主要介紹了Vue 路由 過(guò)渡動(dòng)效 數(shù)據(jù)獲取方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07vue實(shí)現(xiàn)路由懶加載及組件懶加載的方式
懶加載簡(jiǎn)單來(lái)說(shuō)就是延遲加載或按需加載,即在需要的時(shí)候的時(shí)候進(jìn)行加載。這篇文章主要介紹了vue路由懶加載及組件懶加載 ,需要的朋友可以參考下2019-06-06Vue2實(shí)現(xiàn)未登錄攔截頁(yè)面功能的基本步驟和示例代碼
在Vue 2中實(shí)現(xiàn)未登錄攔截頁(yè)面功能,通??梢酝ㄟ^(guò)路由守衛(wèi)和全局前置守衛(wèi)來(lái)完成,以下是一個(gè)基本的實(shí)現(xiàn)步驟和示例代碼,幫助你創(chuàng)建一個(gè)簡(jiǎn)單的未登錄攔截邏輯,需要的朋友可以參考下2024-04-04使用electron-builder將項(xiàng)目打包成桌面程序的詳細(xì)教程
這篇文章主要介紹了使用electron-builder把web端的項(xiàng)目打包生成桌面程序,并可安裝程序,文中通過(guò)代碼示例和圖文結(jié)合的方式給大家介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-08-08