vue 获取 DOM 元素的方法
2023-09-14 09:07:43 时间
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>
相关文章
- Vue专题 02_计算属性(computed) VS 方法(methods)
- js JavaScript vue 时间戳 转换 日期 YYYY-MM-DD hh:mm:ss 简洁写法
- 不用React Vue,只用原生JS,如何开发单页面应用?
- vue子组件向父组件传值的方法
- html使用vue axios,使用 Vue和axios
- Vue03基础语法--Vue组件+样式绑定+修饰符+常用控件+自定义指令+自定义事件
- vue-cli 初始----安装运行Vue项目
- vue刷新页面的方法_vue局部刷新页面
- Vue指令学习 | 零基础入门
- vue页面刷新方法_vue返回上一页怎么实时刷新
- vue父组件引入子组件_vue子组件传递方法给父组件
- vue动态引入js文件的方法_vue如何引入js文件
- vue跨域问题的三种解决方案_前端解决ajax跨域问题的方式
- 今天讲vue讲解专栏里的VUE组件
- 【架构师(第三十篇)】Vue-Test-Utils 全局组件和第三方库 vuex | vue-router
- IntelliJ IDEA使用 vue-cli 创建Vue项目
- 前端面试题汇总-Vue篇
- Vue实现图片大图预览,v-viewer组件的使用方法演示
- vue 获取 DOM 元素的方法
- 4. 「vue@2.6.11 源码分析」new Vue() 整体流程和组件渲染之前的准备工作
- Vue 实现前后端分离,安全连接 MSSQL 数据库(vue 连接mssql)
- 基于Vue的Redis网页设计(vue设计redis页面)