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)文章
vue實(shí)現(xiàn)table表格里面數(shù)組多層嵌套取值
這篇文章主要介紹了vue實(shí)現(xiàn)table表格里面數(shù)組多層嵌套取值,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08
element-plus dialog v-loading不生效問題及解決
這篇文章主要介紹了element-plus dialog v-loading不生效問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03
vue項(xiàng)目中的支付功能實(shí)現(xiàn)(微信支付和支付寶支付)
本文主要介紹了vue項(xiàng)目中的支付功能實(shí)現(xiàn)(微信支付和支付寶支付),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01
vue-cli項(xiàng)目使用mock數(shù)據(jù)的方法(借助express)
現(xiàn)如今前后端分離開發(fā)越來越普遍,前端人員寫好頁面后可以自己模擬一些數(shù)據(jù)進(jìn)行代碼測(cè)試,這樣就不必等后端接口,提高了我們開發(fā)效率。今天就來分析下前端常用的mock數(shù)據(jù)的方式是如何實(shí)現(xiàn)的,需要的朋友可以參考下2019-04-04
vue Element-ui input 遠(yuǎn)程搜索與修改建議顯示模版的示例代碼
本文分為html,js和css代碼給大家詳細(xì)介紹了vue Element-ui input 遠(yuǎn)程搜索與修改建議顯示模版功能,感興趣的朋友一起看看吧2017-10-10
使用Vue-Office實(shí)現(xiàn)Office文件預(yù)覽組件
在現(xiàn)代Web應(yīng)用中,Office 文件的預(yù)覽是一個(gè)常見的需求,本文將使用Vue-Office實(shí)現(xiàn)Office文件預(yù)覽組件,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
Vue實(shí)現(xiàn)實(shí)時(shí)更新sessionStorage數(shù)據(jù)的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue如何實(shí)現(xiàn)實(shí)時(shí)更新sessionStorage數(shù)據(jù),文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,需要的可以參考一下2023-06-06

