vue 快捷轮播组件代码实现

在观看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。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值