示例代码
<template>
<div class="div-body">
<Swiper ref="swiper" v-if="items.length > 0" :autoPlay='true' :showIndicator='false' interval="5000" duration="500">
<Slide v-for="item in items">
<div>{{ item.systemType }}</div>
</Slide>
</Swiper>
</div>
</template>
<script>
import { Swiper, Slide } from 'vue-swiper-component';
import axios from 'axios'
export default {
data() {
return {
items: {}
}
},
methods: {
getData() {
axios.get('/api/remind').then((res) => {
this.items = res.data;
})
}
},
components: {
Swiper,
Slide
},
mounted() {
this.getData();
}
}
</script>
小结
- 安装轮播组件 npm i vue-swiper-component –save
- 引入组件 import { Swiper, Slide } from ‘vue-swiper-component’
- Swiper 设置轮播属性,Slide中设置轮播的内容