vue實(shí)現(xiàn)圖片切換效果
本文實(shí)例為大家分享了vue實(shí)現(xiàn)圖片切換效果的具體代碼，供大家參考，具體內(nèi)容如下
1）v-if/v-show
二者都可以實(shí)現(xiàn)讓元素隱藏和顯示。但是實(shí)現(xiàn)原理不同：v-if 是通過(guò)將元素從dom樹(shù)中移除和添加來(lái)實(shí)現(xiàn)元素的隱藏和顯示效果。v-show 是通過(guò)修改元素的displace值來(lái)實(shí)現(xiàn)元素的隱藏和顯示效果。
2）v-bind
v-bind可以對(duì)元素的屬性值進(jìn)行修改。基于這些背景知識(shí)，下面來(lái)實(shí)現(xiàn)圖片切換實(shí)例。
功能需求1）點(diǎn)擊左邊按鈕，顯示前一張圖片；如果圖片是第一張，則隱藏該按鈕2）點(diǎn)擊右邊按鈕，顯示后一張圖片；如果圖片是最后一張，則隱藏該按鈕
<!DOCTYPE html><html> <head><meta charset='utf-8' /><title>圖片切換效果</title><style> #test{position: absolute; } #left{position: absolute;top: 134px;z-index: 99;width: 24px;height: 32px;background-color: black;color: white;font-size: 24px;opacity: 0.6;cursor: pointer; } #right{position: absolute;right: 0;top: 134px;z-index: 99;width: 24px;height: 32px;background-color: black;color: white;font-size: 24px;opacity: 0.6;cursor: pointer; } img{width: 500px;height: 300px; } </style> </head> <body><div > <div @click = 'changeleft' v-if='lefttt'> < </div> <img v-bind:src = 'http://m.baoyu77737.com/bcjs/’imgs/00’+num+’.jpg’'/><br> <div @click = 'changeright' v-show='righttt'> > </div> </div> </body> <!-- 開(kāi)發(fā)環(huán)境版本，包含了有幫助的命令行警告 --> <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script> <script type='text/javascript'> var dated = new Vue({ //掛載點(diǎn) el: '#test', //數(shù)據(jù) data: {num: 1,lefttt:false,righttt:true, }, methods: { changeleft : function (){ if(this.num <= 2){this.lefttt=false;this.num = 1; }else{this.lefttt=true;this.num--; }this.righttt=true; }, changeright : function (){ if(this.num >= 7){this.righttt=false;this.num = 8; }else{this.righttt=true;this.num++; }this.lefttt=true; } } });</script></html>效果
1）顯示第一張圖片時(shí)
2）顯示最后一張圖片時(shí)
3）顯示其他張圖片時(shí)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. SpringMVC+Jquery實(shí)現(xiàn)Ajax功能2. 解析原生JS getComputedStyle3. ASP 連接Access數(shù)據(jù)庫(kù)的登陸系統(tǒng)4. Jsp中request的3個(gè)基礎(chǔ)實(shí)踐5. 詳解瀏覽器的緩存機(jī)制6. jsp EL表達(dá)式詳解7. jsp實(shí)現(xiàn)textarea中的文字保存換行空格存到數(shù)據(jù)庫(kù)的方法8. IE6/IE7/IE8/IE9中tbody的innerHTML不能賦值的完美解決方案9. 詳解CSS偽元素的妙用單標(biāo)簽之美10. 詳解JSP 內(nèi)置對(duì)象request常見(jiàn)用法
網(wǎng)公網(wǎng)安備