批量获取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>
二获取单个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>