一、Vue2使用ref获取Dom节点
在dom元素上添加ref=“属性值”,然后通过this.$refs.属性值读取dom节点
<!-- 给元素添加ref属性 -->
<div class="com" ref="LeeYuFan">
vue2通过ref获取Dom元素
</div>
-----------------------------------------------
// 读取元素
mounted() {
console.log(this.$refs.LeeYuFan)
}
二、Vue3使用ref获取Dom节点
获取单个绑定了ref属性的标签节点
方法:(在setup中声明一个ref属性值同名的响应式变量返回出去,ref会自动绑定到该元素)
给Dom节点添加ref属性,并且自定义一个名称
在setup中使用ref声明一个变量与标签中ref属性值一致
这个通过ref声明的变量中存储的就是ref属性标记的Dom元素的节点了
<!-- 给节点添加ref属性 -->
<div ref="Lee">我是div节点</div>
----------------------------------------
setup() {
// 在setup()中通过ref定义同名变量
let Lee = ref("")
onMounted(() => {
console.log(Lee, '我是onMounted周期函数中的Lee变量')
})
return {
Lee
}
}
获取多个ref属性绑定的dom元素
方法 :使用ref绑定一个函数获取元素,在函数中把dom添加到数组里面
<!-- 获取多个DOM节点 -->
<div id="div1" :ref="getRefDom"></div>
<span :ref="getRefDom" v-for="i in 3" :key="i"></span>
--------------------------------------------------------
setup() {
//存放dom元素
let domList = []
const getRefDom = (el)=>{
domList.push(el)
}
onMounted(() => {
console.log(domList,'我是onMounted周期函数中的domList变量')
})
return {
getRefDom
}
}