Vue轮播组件

示例代码

<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();
        //  setInterval(this.getData, 120000);
        }
    }
script>

小结

  1. 安装轮播组件 npm i vue-swiper-component –save
  2. 引入组件 import { Swiper, Slide } from ‘vue-swiper-component’
  3. Swiper 设置轮播属性,Slide中设置轮播的内容

你可能感兴趣的:(Vue)