图片切换（vue练习）
作者：互联网
学习vue实现了简单的图片切换，通过点击图片两侧的箭头就可以了 箭头部分使用css定位完成
使用数组imArr存入不同图片地址，然后u放入:scr 就可以了，另外index作为数组下标记，点击切换箭头，调用函数index++ /--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script type="text/javascript" src="../vue/vue (3).js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
.left{margin-top: 300ox;position: absolute;bottom: 200px;opacity: 0.5;}
.right{float: left; position:absolute;bottom: 200px;right: 0px;opacity: 0.5;}
#main{width: 700px;height: 487px; margin: 0 auto;position: relative;}
</style>
</head>
<body>
<div id="main">
<img src="../二次元萌妹子/images/prev.png" alt="" class="left" @click="prev" v-show="pan1">
<img :src="imArr[index]" alt="">
<img src="../二次元萌妹子/images/next.png" alt="" class="right" @click="next" v-show="pan2">
</div>
<script>
var app = new Vue({
el:main,
data:{
imArr:[
"../二次元萌妹子/images/00.jpg",
"../二次元萌妹子/images/01.jpg",
"../二次元萌妹子/images/02.jpg",
"../二次元萌妹子/images/03.jpg",
"../二次元萌妹子/images/04.jpg",
"../二次元萌妹子/images/05.jpg",
"../二次元萌妹子/images/06.jpg",
"../二次元萌妹子/images/07.jpg",
"../二次元萌妹子/images/08.jpg",
"../二次元萌妹子/images/09.jpg",
"../二次元萌妹子/images/10.jpg",
],
index:0,
pan1:false,
pan2:true
},
methods:{
prev:function(){
if(this.index==0){
this.pan1=false;
}
else{
this.index--;
this.pan1=true;
}
this.pan2=true;
},
next:function(){
this.index++;
this.pan1=true;
if(this.index==10){
this.pan2=false;
}
if(this.index>10){
this.index=10;
}
}
}
})
</script>
</body>
</html>
标签：index,vue,..,练习,jpg,二次元,切换,images,妹子 来源： https://www.cnblogs.com/yyyueyou/p/15123306.html