在观看vue实战视频的时候,发现用的插件比较复杂,于是采用Iview组件中的轮播组件。
1 进行iView 依赖的下载
npm install iview --save
2 在main.js进行依赖的引入
import iView from 'iview'
import 'iview/dist/styles/iview.css'
Vue.use(iView)
3 在需要的页面进行轮播组件的引入
<Carousel autoplay v-model="value2" loop>
<CarouselItem v-for="item in recommends" :key="item.id">
<a :href="item.linkUrl" class="demo-carousel">
<img :src="item.picUrl">
</a>
</CarouselItem>
</Carousel>
注意使用vue的v-for循环语法的时候,最好加上一个关键字,加以识别。
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。