vue3 ref 获取单个Dom及多个Dom

获取单个Dom

<input type="text" ref="inputRef" />
setup() {
    const inputRef = ref(null)
    onMounted(()=>{
        console.log(inputRef.value);
    })
}

获取多个Dom

<div v-for="(item, index) in state.list" :key="index" :ref="setItemRef">
    {{item}}
</div>

setup() {
    let itemRef = ref([])
    let state = reactive([])
    const setItemRef = (el) => {
        itemRef.value.push(el)
    }
    onMounted(()=>{
        // 模拟调用接口
        setTimeout(()=>{
            state.curMenuList = [1,2,3]
        },1000)
    })
    onBeforeUpdate(() => {
        itemRef.value = [];
    });
    
    onUpdated(()=>{
        itemRef.value.map(d=>{
            d.style.height = '100px'
        })
    })
    return {
        state,
        setItemRef,
    }
}

 


posted @ 2024-02-23 11:31  会转圈圈的哆瑞米  阅读(299)  评论(0编辑  收藏  举报