使用vue3写轮播图

刚开始上手Vue3，上午图片不切换，下午给存图片的数组和变量都加了响应式，终于可以实现图片切换了。

上代码，初级学习者，大佬勿喷

<template>
<!-- v-for="item in bannerList" :key="item" -->
  <div class="pic" >
    <img :src="bannerList[showNumber].url" alt="">
  </div>
</template>

<script>
import { onMounted,ref,reactive } from '@vue/runtime-core'
  export default {
    name: 'App',
    setup() {
      //变量
      let showNumber = ref(0)
      const bannerList = reactive([
        {
          url: require("./assets/1.jpg")
        },
        {
          url: require("./assets/2.jpg")
        },
        {
          url: require("./assets/3.jpg")
        },
        {
          url: require("./assets/4.jpg")
        },
        {
          url: require("./assets/5.jpg")
        },
      ])
      //生命周期
      onMounted(()=>{
        setTimeout(()=>{
          if(showNumber.value<4){
            showNumber.value++
            }
            else{
              showNumber.value = 0
            }
            console.log(bannerList[showNumber.value])
        },2000)
      })
      return {
        showNumber,
        bannerList
      }
    }
  }
</script>

<style scoped lang="less">
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
  }
</style>

如果有更好的方式欢迎评论区交流

-----------------------------------------------------better me---------------------------------------------------------------