教你使用Vue实战轮播图案例（效果图+贡献所有代码）

学习Vue，从做实战开始，没有华丽的css装饰和复杂的html界面，只关注学习Vue本身。

功能很简单，可以直接看图即可，代码放在下面，看前记得点个赞，养成好习惯哦，关注我也可以的哦，因为我时常会出很多Vue小项目哦，当然有问题你在底下评论说话呀

Vue实战系列

教你使用Vue实战笔记本案例（效果图+贡献所有代码）

在这里插入图片描述

Vue的轮播图代码
（特别提醒：导入的外链式Vue.js记得换成自己的路径，还有轮播图里的图片）
@粗心的小伙伴

当然你想用我的图片我也是不会介意的哦，哈哈

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一颗剽悍的种子</title>
		<style>
			.box{
				margin: auto;
				border: 1px solid #000000;
				width: 450px;
				height: 600px;
				position: relative;
			}
			.rotation{
				width: 400px;
				height: 400px;
				margin:100px auto;
				border: 1px solid #000000;
				
			}
			.rotation img{
				width: 100%;
				height: 100%;
			}
			.prev,.next{
				height: 50px;
				position: absolute;
				top: 260px;
				cursor: pointer;
			}
			.prev{
				left: 0px;
			}
			.next{
				right: 0px;
			}
		</style>
	</head>
	<body>
		
		<div id="app" class="box">
			<input class="prev" type="button" value="<" v-on:click="prev()" />
			<div class="rotation">
				<img :src="imgageName[index]" />
			</div>
			<input class="next" type="button"value=">" v-on:click="next()" />
		</div>
		
		<script src="js/vue.js"></script>
		<script>
			new Vue({
				el:"#app",
				data:{
					imgageName:['images/0.png','images/1.png','images/2.png','images/3.png']
					,index:0
				},
				methods:{
					next(){
						this.index++;
						if(this.index >= this.imgageName.length){
							this.index=0;
						}
					},
					prev(){
						this.index--;
						if(this.index < 0){
							this.index=this.imgageName.length-1;
						}
					}
				}
			})
		</script>
	</body>
</html>

最后：

为了更好的阅读体验，我把想说的话都放在了下面，嘿嘿。

我是一颗剽悍的种子 把我会的，认真的分享是我写博客一直不变的信条。
如果你能看到这篇博文，说明咱们还是很有缘的；希望能带给你一些许帮助，创作的不易，把我文章的知识带走，你的三连留下，点赞，评论，关注，是我最大的动力。

教你使用Vue实战轮播图案例（效果图+贡献所有代码）

猜你喜欢