您好,登錄后才能下訂單哦!
這篇文章主要講解了“vue 3.0怎么使用ref獲取dom元素”,文中的講解內容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“vue 3.0怎么使用ref獲取dom元素”吧!
<div ref="myRef"></div> this.$refs.myRef
<template> <div ref="myRef">獲取單個DOM元素</div> </template> <script> import { ref, onMounted } from 'vue'; export default { setup() { const myRef = ref(null); onMounted(() => { console.dir(myRef.value); }); return { myRef }; } }; </script>
<template> <div>獲取多個DOM元素</div> <ul> <li v-for="(item, index) in arr" :key="index" :ref="setRef"> {{ item }} </li> </ul> </template> <script> import { ref, nextTick } from 'vue'; export default { setup() { const arr = ref([1, 2, 3]); // 存儲dom數組 const myRef = ref([]); const setRef = (el) => { myRef.value.push(el); }; nextTick(() => { console.dir(myRef.value); }); return { arr, setRef }; } }; </script>
注:console.dir()可以顯示一個對象所有的屬性和方法
效果圖:
感謝各位的閱讀,以上就是“vue 3.0怎么使用ref獲取dom元素”的內容了,經過本文的學習后,相信大家對vue 3.0怎么使用ref獲取dom元素這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關知識點的文章,歡迎關注!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。