vue3点击随机切换背景图片

利用点击事件触发随机数

<template>
  <div>
   //背景图片可以变量
    <div class="home" :style="{ backgroundImage: `url(${backimg})` }"></div>
    <button @click="qh">切换</button>
  </div>
</template>
 
<script>
    import bg1 from "../assets/a1.png"
    import bg2 from "../assets/a3.png"
    import bg3 from "../assets/a4.png"
    import bg4 from "../assets/a5.png"
    import bg5 from "../assets/a6.png"
    import { ref, reactive, toRefs, computed } from 'vue';
    import { useStore } from 'vuex';
    import { useRouter, useRoute } from 'vue-router';
    import axios from "axios"
    export default {
            setup(props, ctx) {
            const data = reactive({
            backimg: bg1,//某认显示第一张
            imgs: [bg1, bg2, bg3, bg4, bg5],
            }
         const add = () => {
              
                let num = Math.round(Math.random() * 4)//设置一个随数
            
                data.backimg = data.imgs[num]//吧随机数放到backing里
                console.log(backimg);
            }
             return { ...toRefs(data), add};
        },
    };