vue+js點擊箭頭實現(xiàn)圖片切換
更新時間:2021年06月25日 08:54:07 作者:anshengsuiyeu
這篇文章主要為大家詳細介紹了vue+js點擊箭頭實現(xiàn)圖片切換,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue+js點擊箭頭實現(xiàn)圖片切換的具體代碼,供大家參考,具體內(nèi)容如下
前端需求是 返回的圖片數(shù)據(jù)能夠點擊箭頭切換
代碼如下
<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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3+TypeScript實現(xiàn)PDF預(yù)覽組件
這篇文章主要為大家詳細介紹了如何基于Vue3+TypeScript實現(xiàn)PDF預(yù)覽組件,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04vue3中實現(xiàn)拖拽排序代碼示例(vue-draggable-next的使用)
在Vue3中使用拖拽功能時應(yīng)選用vue-draggable-next插件,傳統(tǒng)的draggable插件不兼容Vue3,可能導(dǎo)致TypeError錯誤,安裝后,需在項目中引入并使用,具體步驟包括安裝插件、引入使用、查看效果和相關(guān)說明,需要的朋友可以參考下2024-09-09一文詳解Vue響應(yīng)式數(shù)據(jù)的原理
在vue2的響應(yīng)式中,存在著添加屬性、刪除屬性、以及通過下標修改數(shù)組,但頁面不會自動更新的問題,而這些問題在vue3中都得以解決,本文就給大家詳細的介紹一下Vue響應(yīng)式數(shù)據(jù)原理,感興趣的小伙伴跟著小編一起來看看吧2023-08-08Vue2實現(xiàn)未登錄攔截頁面功能的基本步驟和示例代碼
在Vue 2中實現(xiàn)未登錄攔截頁面功能,通??梢酝ㄟ^路由守衛(wèi)和全局前置守衛(wèi)來完成,以下是一個基本的實現(xiàn)步驟和示例代碼,幫助你創(chuàng)建一個簡單的未登錄攔截邏輯,需要的朋友可以參考下2024-04-04使用electron-builder將項目打包成桌面程序的詳細教程
這篇文章主要介紹了使用electron-builder把web端的項目打包生成桌面程序,并可安裝程序,文中通過代碼示例和圖文結(jié)合的方式給大家介紹的非常詳細,具有一定的參考價值,需要的朋友可以參考下2024-08-08