vue||图片切换效果

最新推荐文章于 2023-03-18 23:05:25 发布

月亮不休我不眠

最新推荐文章于 2023-03-18 23:05:25 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/qq_43543920/article/details/106109951

版权

WEB 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

vue相关知识

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

功能需求

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

实现代码

<!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>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <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）显示第一张图片时
在这里插入图片描述
2）显示最后一张图片时

3）显示其他张图片时

月亮不休我不眠

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue||图片切换效果

vue相关知识1）v-if/v-show二者都可以实现让元素隐藏和显示。但是实现原理不同：v-if 是通过将元素从dom树中移除和添加来实现元素的隐藏和显示效果。v-show 是通过修改元素的displace值来实现元素的隐藏和显示效果。2）v-bindv-bind可以对元素的属性值进行修改。基于这些背景知识，下面来实现图片切换实例。功能需求1）点击左边按钮，显示前一张图片；如果图片是第一张，则隐藏该按钮2）点击右边按钮，显示后一张图片；如果图片是最后一张，则隐藏该按钮实现代码&l
复制链接

扫一扫