vuejs小例子之实现图片的切换
代码：
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
#app {
border: 1px solid red;
left: 50%;
top: 50%;
width: 410px;
height: 235px;
}
.bg {
position: relative;
top: 5px;
left: 5px;
}
.left {
position: absolute;
top: 104px;
left: 15px;
}
.lbg {
height: 80px;
width: 30px;
opacity: 0.8;
}
.right {
position: absolute;
top: 104px;
left: 382px;
}
.rbg {
height: 80px;
width: 30px;
opacity: 0.8;
}
</style>
</head>
<body>
<div id="app">
<img :src="imgurl[index]" alt="" class="bg">
<span>
<a href="#" class="left" @click="prev" v-show="index!=0">
<img src=" ./img/left.jpg " alt=" " class="lbg ">
</a>
</span>
<a href="# " class="right " @click="next " v-show="index<imgurl.length-1">
<img src="./img/right.jpg " alt=" " class="rbg ">
</a>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
imgurl: ["./img/img1.jpg ", "./img/img2.jpg ",
"./img/img3.jpg ", "./img/img4.jpg "],
index: 0,
},
methods: {
prev: function () {
this.index -= 1;
},
next: function () {
this.index += 1;
}
},
})
</script>
</body>
</html>结果：
最开始显示第一章，然后index=0，不会显示左箭头，点击右箭头：
index=1，显示左箭头，一直点击到显示最后一张：
不显示右箭头了。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-02-16 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读