vue實(shí)現(xiàn)圖片切換效果

更新時(shí)間：2021年06月25日 09:45:24 作者：程序員在努力

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)圖片切換效果的具體代碼，供大家參考，具體內(nèi)容如下

1）v-if/v-show

二者都可以實(shí)現(xiàn)讓元素隱藏和顯示。但是實(shí)現(xiàn)原理不同：
v-if 是通過(guò)將元素從dom樹中移除和添加來(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)擊右邊按鈕，顯示后一張圖片；如果圖片是最后一張，則隱藏該按鈕

實(shí)現(xià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 id="test" >
            <div id="left" @click = "changeleft" v-if="lefttt">  &lt; </div>
            <img v-bind:src = "'imgs/00'+num+'.jpg'"/><br>
            <div id="right" @click = "changeright" v-show="righttt"> &gt; </div>
           

        </div>
    </body>
    <!-- 開發(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>