vue 3.0 使用ref獲取dom元素的示例
前言
附上vue3.0文檔:Vue3中文文檔 – vuejs
Vue 2.x獲取DOM
<div ref="myRef"></div> this.$refs.myRef
Vue 3.0獲取單個DOM
<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>
Vue 3.0獲取多個DOM(一般用於獲取數組)
<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 ref獲取dom元素內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- vue3中ref綁定dom或者組件失敗的原因及分析
- 詳解Vue3中setup函數的使用教程
- Vue3中使用setup通過ref獲取子組件的屬性
- Vue3常用的通訊方式總結與實例代碼
- vue組合式API淺顯入門示例詳解