Vue:图片切换

本来还有个v-bind指令没写笔记，懒得写了，至于怎么用，就一并在这里记录吧。

首先我们这次想要实现的是图片的切换，有两个按钮，可以向左和向右切换图片。第一张图片由于其左边没有图片了，因此此时的左按钮应隐藏，同理当处于最后一张图片时应隐藏右按钮。

实现逻辑比较简单，但是我们一共要用到好几个v指令。例如上面按钮的隐藏需要用到v-show指令；操作图片要用到v-bind指令，所以这个指令是用来操作元素属性的；然后还有点击事件等等。在这次的代码中我们全部采用简写方式。

首先，图片，我们怎么实现图片的来回切换呢？使用数组呗！我们搞一个数组专门来存储这些图片就好了。这时，自然还需要一个index来表示数组的索引，点击左右按钮实际改变的就是这个index值。

好了，现在开工！

对于图片显示的html结构，我们就先写一个大的div块，然后在这个div块里面先是向前翻的图标，然后是图片，最后是向后翻的图标。

那么首先，我们自然要在data里面，定义两个变量，分别是数组imgArr和索引index.数组我们就把所有需要用到的图片保存到我们的项目文件下，然后把路径名保存到数组里，接着，索引的初始值我们定为0.然后我们写两个函数，分别是prev函数和next函数，分别表示向前翻和向后翻，这两个函数是要绑定到对应的按钮上去的。然后，为了控制在显示第一张和最后一张图片时，对应的按钮要消失不见，我们必须在对应图片上html代码上写上v-show指令。怎么写呢？很简单，第一张图片，只需要写上index!=0就可以了；而最后一张，只需要写上index<imgArr.length-1就行了。(至于为什么是减一，自己试试就知道了)

在中间显示图片的img标签下，src我们需要给定imgArr数组的值，中间是啥呢？index.这个，就是v-bind指令的应用，操作属性。

这样一来，就大功完成了，最后把完成的两个函数绑定到对应位置处就OK了。

我的代码长这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
</head>
<body>
    <div id="mask">
        <div id="center">
            <a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left">
                <img src="prev.png" alt="">
            </a>
            <img :src="imgArr[index]" alt="">
            <a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next" class="right">
                <img src="next.png" alt="">
            </a>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#mask",
            data:{
                imgArr:[
                    "盖亚太帅了！.png",
                    "看这一脚踢的！.png",
                    "有阴谋！.png",
                    "打赢了！.png",
                    "被打懵了.png",
                    "啊！.png",
                    "我倒了.png",
                    "盖亚！.png",
                    "坏了，盖亚被怪兽钳住了.png",
                    "阿古菇，你要连我一块儿消灭吗！？.png",
                    "戴拿和哥尔赞这深情的对视.png",
                    "戴拿：我把你当兄弟，你居然牵我小手手？.png",
                ],
                index:0
            },
            methods:{
                prev:function () {
                    --this.index;
                },
                next:function () {
                    ++this.index;
                }
            }
        })
    </script>
</body>
</html>

随便放两张看看效果吧：

最后再补充一点：盖亚奥特曼真TM帅！不接受反驳。

__EOF__

本文作者：EvanTheBoy
本文链接：https://www.cnblogs.com/EvanTheGreat/p/15892033.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！