<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = 'app'>
<button v-show = "index > 0" @click = "index--">上一页</button><!-- 首页隐藏按钮 -->
<div>
<img :src = "List[index]" alt = "">
</div>
<button v-show = "index < List.length - 1" @click = "index++">下一页</button><!-- 尾页隐藏按钮 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const vm = new Vue({
el : '#app',
data : {
index : 0,
List: [
/* 以下是图片的路径，每个人不一样 */
"../img/swiper/1.jpg",
"../img/swiper/2.jpg",
"../img/swiper/3.jpg",
"../img/swiper/4.jpg",
"../img/swiper/5.jpg",
"../img/swiper/6.jpg",
"../img/swiper/7.jpg",
"../img/swiper/8.jpg",
]
},
})
</script>
</body>
</html>vue图片切换案例
猜你喜欢
转载自blog.csdn.net/m0_62600503/article/details/132380190
今日推荐
周排行