vue 获取 DOM 元素的方法
vue 获取 DOM 元素的方法
蓓蕾心晴
发布于 2023-02-17 05:31:44
发布于 2023-02-17 05:31:44
代码可运行
运行总次数：0
代码可运行
1 .原生js获取 DOM 节点
document.querySelector(选择器)
document.getElementById(id选择器)
document.getElementsByClassName(class选择器)
....2. vue2中获取当前组件的实例对象
因为每个 vue 的组件实例上，都包含一个 refs 对象，里面存储着对应的 DOM 元素或组件的引用。所以在默认情况下， 组件的 refs 指向一个空对象 。
可以先在组件上加上 ref="名字" ，然后通过 this.$refs.名字 获取相应元素并进行操作。
<template>
<div class="box">
<h1 ref="divDom">这是一个测试样例</h1>
<button ref="but">按钮</button>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
showThis(){
// h1的实例对象
console.log(this);
this.$refs.divDom.style.color='yellow'
//引用到组件的实例之后，也可以调用组件上的 methods方法
this.$refs.but.click();
},
},
}
</script>3.vue3中获取当前组件的实例对象
1.创建 ref 变量，给组件或元素绑定 ref 属性值为该变量
2. 通过变量.value获取
<template>
<div ref="container"></div>
</template>
<script setup>
import { ref } from 'vue';
const container = ref(null);
onMounted(()=>{
console.log('获取dom元素',container.value)
})
</script> 本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2023-02-02，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
暂无评论
推荐阅读
相关推荐
第八章：vue生命周期、vue的DOM操作、mixin混入，插件
更多 >
腾讯云开发者
