4.Vue切换图片案例

最新推荐文章于 2024-04-21 20:58:04 发布

肝JOJO

最新推荐文章于 2024-04-21 20:58:04 发布

阅读量488

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/qq_34620296/article/details/103092669

版权

Vue.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

要求:
1.点击按钮,切换图片
2.在第一张图片时,隐藏上一张,在最后一张图片时,隐藏下一张

效果如下:
在这里插入图片描述

代码:

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        window.onload=function(){
            var mask = new Vue({
                el:"#mask",
                data: {
                    imgArr:[
                        "img/1.jpg",
                        "img/2.jpg",
                        "img/3.jpg",
                    ],
                    index:0,
                },
                methods: {
                    prev:function(){
                        this.index--;

                    },
                    next:function(){
                        this.index++;
                    }
                },
            })

        }
    </script>

<body>
    <div id="mask">      
        <img :src="imgArr[index]" alt=""> 
        <a href="javascript:;" @click="prev" v-show="index!=0">上一张</a> 
        <!-- 索引不等于0 显示 -->
        <a href="javascript:;" @click="next" v-show="index<imgArr.length-1">下一张</a>
        <!-- 索引小于数组长度 显示 -->

    </div>
</body>