vue3 TS实现动态星空+ref获取for循环的dom元素

• 先说一下如何通过vue3+ts中，如何通过ref获取dom元素

首先给元素绑定ref，与vue2不同的是，ref中是个变量。我获取的for循环的所有dom元素

在js中，需要引入ref

import { defineComponent, reactive, toRefs, onMounted, ref, toRaw } from 'vue'

定义ref数组boxRefs

const boxRefs = ref([])

const setBoxRef = (el: any) => {
            if (el) {
                boxRefs.value.push(el)
            }
        }

 onMounted(() => {
            let that = this;
            let starArr: any[];    //定义一个接收数组
            starArr = boxRefs.value
            console.log(starArr,'-starArr');
        })

• 接下来是星空源码

首先，在样式的body中，写背景色

然后开始正文：

html：

ts：

css：

• 小星星会动哦～