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

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

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

Vue实战系列

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

教你使用Vue实战轮播图案例(效果图+贡献所有代码)_第1张图片

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实战项目)