生活随笔
收集整理的這篇文章主要介紹了
vue积累——另一种走马灯
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果圖:
vue源碼:
<template><el-carousel :interval="1500" type="card" height="400px" ><el-carousel-item v-for="item in imgList" :key="item.id"><img :src="item.idView" class="image"></el-carousel-item></el-carousel>
</template><script>
export default {name: "MoveAndActor",data() {return {imgList: [{id:0,idView:require("@/assets/damingxing.png")},{id:1,idView:require("@/assets/chenglong.webp")},{id:2,idView:require("@/assets/liang.webp")},{id:3,idView:require("@/assets/liyifeng.webp")},{id:4,idView:require("@/assets/dont.webp")},{id:5,idView:require("@/assets/han.webp")}]};}
}
</script><style scoped>
.el-carousel__item h3 {color: #000000;font-size: 14px;opacity: 0.75;line-height: 200px;margin: 0;
}.el-carousel__item:nth-child(2n) {width: 330px;margin-left: 80px;
}.el-carousel__item:nth-child(2n+1) {width: 350px;margin-left: 80px;
}
.image{width:345px;
}</style>
注意合理引用，全篇復制是不行的。
地凍三尺，非一日之寒。
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎
總結
以上是生活随笔為你收集整理的vue积累——另一种走马灯的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
