v-show v-click v-bind 综合应用小栗子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图栗子</title>
<style>
.myPic{
width:300px;
height:300px;
border:10px solid pink;
}
</style>
</head>
<body>
<div id="app" style="text-align: center">
<a @click="prev" v-show="index>0">上一张</a>
<img :src="imgArr[index]" :class="classA">
<a @click="next" v-show="index<imgArr.length-1">下一张</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
imgArr: ['http://www.aisencode.cn/wp-content/themes/kratos-pjax-master/static/images/thumb/thumb_1.jpg','http://www.aisencode.cn/wp-content/themes/kratos-pjax-master/static/images/thumb/thumb_2.jpg','http://www.aisencode.cn/wp-content/themes/kratos-pjax-master/static/images/thumb/thumb_3.jpg'],
index: 0,
classA: 'myPic',
},
methods: {
prev: function (){
if (this.index > 0){
this.index --;
}
},
next: function (){
if (this.index < this.imgArr.length-1){
this.index++
}
}
}
});
</script>
</body>
</html>
我是分割线
前台效果