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 @click=’change(index,'prev')’></ins><ins @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='http://www.hdgsjgj.cn/bcjs/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í)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. 存儲于xml中需要的HTML轉(zhuǎn)義代碼2. python 浮點(diǎn)數(shù)四舍五入需要注意的地方3. Java GZip 基于內(nèi)存實(shí)現(xiàn)壓縮和解壓的方法4. python開發(fā)一款翻譯工具5. 利用CSS制作3D動(dòng)畫6. jsp+servlet簡單實(shí)現(xiàn)上傳文件功能(保存目錄改進(jìn))7. Springboot 全局日期格式化處理的實(shí)現(xiàn)8. 完美解決vue 中多個(gè)echarts圖表自適應(yīng)的問題9. SpringBoot+TestNG單元測試的實(shí)現(xiàn)10. PHP實(shí)現(xiàn)簡單線性回歸之?dāng)?shù)學(xué)庫的重要性
