vue轮播图展示

一：vue轮播图展示

css

二：效果展示

<template>
  <div id="Login">
    <div class="login">
      <!-- 11111111111 -->
      <img v-for="(v, i) in listImg" :key="i" :src="v" v-show="n==i" />
    </div>
  </div>
</template>

<script>

export default {
  name: "Login",
  props: {},
  data() {
    return {
      n:1,
      listImg: [
        require("../../assets/f1.png",),
        require("../../assets/f2.png",),
        require("../../assets/f3.png",),
        require("../../assets/f4.png",),
      ],
    };
  },
  methods: {
    play:function(){
      setInterval(this.autoPlay,2000)
    },
    autoPlay:function(){
      this.n++;
      if(this.n == this.listImg.length){
        this.n = 0;
      }
    }
  },
  mounted(){
      this.play();
  },
  computed: {},
  components: {},
  created() {
    
  },
};
</script>

<style scoped>
* {
  margin: 0 auto;
}
.login {
  width: 600px;
  height: 300px;
  border: 1px solid #000;
}

.login img{
   width: 600px;
   height: 300px;
}

</style>