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
在中间显示图片的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>Titletitle>
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 @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帅！不接受反驳。