介绍一个vue项目给大家学习,阅读别人的项目可以快速提高自己哦, 移动端vue完整项目
轮播图:
<template>
<div class="bannerbox">
<el-carousel :interval="5000" height="300px" arrow="always">
<el-carousel-item v-for="item in dataimg" :key="item">
<img :src="item.url">
</el-carousel-item>
</el-carousel>
</div>
</template>
<!-- 如果这里加scoped,下面的更改将无效,因为scoped关键字会让css代码只作用于本文件 -->
<style>
.bannerbox{width: 500px;}
.el-carousel__item h3 {
color: #>;
font-size: 18px;
opacity: 0.75;
line-height: 300px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
/*圆点风格*/
.el-carousel__button{width: 10px; height: 10px;border-radius: 50%; background-color: #CCCCCC;}
/*圆点盒子*/
.el-carousel__indicators{ height: auto;margin-bottom: 10px; background-color: rgba(255,255,255,0.5);border-radius: 10px;}
.el-carousel__indicator{padding: 5px;}
/*箭头按钮风格*/
.el-carousel__arrow{color: white;}
</style>
<script type="text/javascript">
export default{
data(){
return{
dataimg:[{url:require('../img/a.png')},{url:require('../img/b.png')},{url:require('../img/c.png')}]
}
}
}
</script>
以上若有不对的地方还望指出