学习Vue,从做实战开始,没有华丽的css装饰和复杂的html界面,只关注学习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>
最后:
为了更好的阅读体验,我把想说的话都放在了下面,嘿嘿。
我是一颗剽悍的种子 把我会的,认真的分享 是我写博客一直不变的信条。
如果你能看到这篇博文,说明咱们还是很有缘的;希望能带给你一些许帮助,创作的不易, 把我文章的知识带走,你的三连留下,点赞,评论,关注,是我最大的动力。