vue||图片切换效果

墨蓝 2023-03-13 13:12 22阅读 0赞

## vue相关知识 ##

**1）v-if/v-show**  
二者都可以实现让元素隐藏和显示。但是实现原理不同：  
v-if 是通过将元素从dom树中移除和添加来实现元素的隐藏和显示效果。  
v-show 是通过修改元素的displace值来实现元素的隐藏和显示效果。  
**2）v-bind**  
v-bind可以对元素的属性值进行修改。  
基于这些背景知识，下面来实现图片切换实例。

## 功能需求 ##

1）点击左边按钮，显示前一张图片；如果图片是第一张，则隐藏该按钮  
2）点击右边按钮，显示后一张图片；如果图片是最后一张，则隐藏该按钮  
![在这里插入图片描述][20200514000439869.PNG]

## 实现代码 ##

<!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">  < </div>
                <img v-bind:src = "'imgs/00'+num+'.jpg'"/><br>
                <div id="right" @click = "changeright" v-show="righttt"> > </div>
                
    
            </div>
        </body>
        
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script type="text/javascript">
             
             var dated = new Vue({ 
                 //挂载点
                 el: "#test",
                 //数据
                 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）显示第一张图片时  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70]  
2）显示最后一张图片时  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 1]  
3）显示其他张图片时  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 2]

[20200514000439869.PNG]: /images/20230312/eff6d4995c3a4727acbcffcb653c9cc5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70]: /images/20230312/4ab3bbf580604c2681498039afd16335.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 1]: /images/20230312/891a59a8dc134bc5867f28fd3d9ad292.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200514000846347.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw,size_16,color_FFFFFF,t_70