vue 2.x获取DOM
<div ref="test"></div>
this.$refs.test
vue 3获取单个或多个DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
let app = Vue.createApp({
template: '<div ref="test2"><div v-for="(item,index) in arr" :index="index" :ref="setRef" >{{item}}</div></div>',
setup() {
const {
ref,
onMounted,
reactive
} = Vue
const test2 = ref(null)
let arr = reactive([1, 2, 3, 4, 5])
const testArr = []
onMounted(() => {
console.log(test2.value)
})
const setRef = (el) => {
testArr.push(el);
console.log(el, testArr, 111)
};
return {
test2,
arr,
setRef
}
},
})
app.mount('#root')
</script>
</html>