vue3获取页面的Dom元素_uniapp的vue3获取多个dom元素的方法

批量获取Dom的方法

• 首先在上面引入import { ref } from ’vue
• 然后在页面上和vue2.x的用法差不多，但是批量的化要绑定一个实例像这个setref使用:ref="setRef"
• 在setup方法里面使用这个ref现创建一个响应式的空数组然后在使用setRef实例方法获取系列元素然后push到空数组里面

<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) => {
      console.log(el,'')
      myRef.value.push(el);
    };

    nextTick(() => {
      console.dir(myRef.value[0].innerHTML="你好","多个dom示例");
    });
    return {
      arr,
      setRef
    };
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

二获取单个dom的方法

<template>
  <div>获取多个DOM元素</div>
  <ul>
    <li v-for="(item, index) in arr" :key="index" ref="myRef">
      {{ item }}
    </li>
  </ul>
</template>

<script>
import { ref, nextTick } from 'vue';

export default {
  setup() {
    const arr = ref([1, 2, 3]);

    // 存储dom数组
    const myRef = ref(unll);

    

    nextTick(() => {
      console.dir(myRef.value.innerHTML="你好","单个dom示例");
    });
    return {
      arr,
      myRef 
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31