vue 3 获取DOM

Vue
Vue 2获取DOM
  1. <div ref=“Ref”></div>
  3. this.$refs.Ref
Vue 3获取单DOM
  1. <template>
  2.   <div ref=“Ref”>获取单个DOM元素</div>
  3. </template>
  5. <script>
  6. import { ref, onMounted } from ‘vue’;
  8. export default {
  9.   setup() {
  10.     const Ref = ref(null);
  12.     onMounted(() => {
  13.       console.dir(Ref.value);
  14.     });
  15.     return {
  16.       Ref
  17.     };
  18.   }
  19. };
  20. </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>
  10. <script>
  11. import { ref, nextTick } from ‘vue’;
  13. export default {
  14.   setup() {
  15.     const arr = ref([1, 2, 3]);
  17.     // 存储dom数组
  18.     const Ref = ref([]);
  20.     const setRef = (el) => {
  21.       Ref.value.push(el);
  22.     };
  24.     nextTick(() => {
  25.       console.dir(Ref.value);
  26.     });
  27.     return {
  28.       arr,
  29.       setRef
  30.     };
  31.   }
  32. };
  33. </script>

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

发表回复

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