vue 3 获取DOM

Vue 2获取DOM
  1. <div ref=“Ref”></div>
  2. this.$refs.Ref
Vue 3获取单DOM
  1. <template>
  2.   <div ref=“Ref”>获取单个DOM元素</div>
  3. </template>
  4. <script>
  5. import { ref, onMounted } from ‘vue’;
  6. export default {
  7.   setup() {
  8.     const Ref = ref(null);
  9.     onMounted(() => {
  10.       console.dir(Ref.value);
  11.     });
  12.     return {
  13.       Ref
  14.     };
  15.   }
  16. };
  17. </script>
Vue 3获取多DOM
  1. <template>
  2.   <div>获取多DOM元素</div>
  3.   <ul>
  4.     <li v-for=“(item, index) in arr” :key=“index” :ref=“setRef”>
  5.       {{ item }}
  6.     </li>
  7.   </ul>
  8. </template>
  9. <script>
  10. import { ref, nextTick } from ‘vue’;
  11. export default {
  12.   setup() {
  13.     const arr = ref([1, 2, 3]);
  14.     // 存储dom数组
  15.     const Ref = ref([]);
  16.     const setRef = (el) => {
  17.       Ref.value.push(el);
  18.     };
  19.     nextTick(() => {
  20.       console.dir(Ref.value);
  21.     });
  22.     return {
  23.       arr,
  24.       setRef
  25.     };
  26.   }
  27. };
  28. </script>

本文链接地址: vue 3 获取DOM

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注