轮播图，用vue来写一个简单的轮播图
写的很简单，就是一个小练习，哈哈哈，下面的几张图分别是轮播图的第一张，中间图，最后一张的效果图。
使用了vue 中的属性绑定 v-bind ,v-show 以及 事件监听 v-on 指令。
思路:
1.vue实例中声明一个data属性imgArr，用于存放每张轮播图的地址，
2.同时定义一个默认起始索引index=0,
3.然后给两边的箭头监听点击事件，
4.最后通过v-show判断一下第一张和最后一张就不再显示左右箭头即可。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue练习</title>
<style>
body{
background-color: #eee;
}
#loopImg{
width: 500px;
height: 300px;
margin: 25vh auto;
border-radius: 8px;
position: relative;
}
.image-box>img{
height: 300px;
width: 300px;
border-radius: 10px;
z-index: -1;
left: 100px;
}
span>img{
width: 95px;
position: absolute;
}
.left{
left: 0;
top: 100px;
}
.right{
right: 0;
top: 100px;
}
</style>
</head>
<body>
<div id="loopImg">
<!-- 左箭头 -->
<span><img src="./link/left.png" class="left" @click="prev" v-show="index!=0"></span>
<span class="image-box">
<img v-bind:src="imgArr[index]" >
</span>
<!-- 右箭头 -->
<span ><img src="./link/right.png" class="right" @click="next" v-show="index<imgArr.length-1"></span>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#loopImg',
data: {
// 图片url 数组
imgArr:[
"/image/ys01.jpg",
"/image/ys02.jpg",
"/image/ys03.jpg",
"/image/ys04.jpg",
"/image/ys05.jpg",
"/image/ys06.jpg",
"/image/ys07.jpg",
"/image/ys08.jpg",
"/image/ys09.jpg",
"/image/ys10.jpg",
"/image/ys11.jpg",
"/image/ys12.jpg",
"/image/ys13.jpg",
],
index:0 // 图片数组索引
},
methods: {
// 前一张图片
prev:function(){
this.index--
},
// 下一张图片
next:function(){
this.index++
}
}
})
</script>
</body>
</html>
