vue中获取并操作dom元素

获取dom元素可以使用

elementList = document.querySelectorAll(selectors);//获取多个dom元素 如ul中的li

element = document.querySelector(selectors)//获取dom元素中的第一个元素

在vue中使用

mounted(){//这里必须是mouted钩子
this.title = document.querySelector('#footer-box-title');
this.title.style.color = "#ff0000";
}

要在mounted中使用，因为只有在执行mounted的时候，vue已经渲染了dom节点，这个时候是可以获取dom节点的，vue中尽量不去操作dom元素，选用ref操作属性获取

<button ref="btn">获取ref</button>this.$refs.btn.style.backgroundColor="#ff0000"

vue中获取并操作dom元素相关推荐

【vue】vue 如何获取并操作DOM元素
方法一: 直接给的元素加id,使用document.getElementById("id")获取,然后操作 dom 元素 mounted(){this.element = docu ...
vue如何获取并操作DOM元素
原文地址方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式方法二: 使用ref,给相应的元素加re ...
Vue中获取当前点击元素的父元素、子元素、兄弟元素
Vue如何获取当前点击元素? 获取父元素.子元素.兄弟元素呢? 通过帮定点击事件: 例如: <button class="shanchu" @click="shan ...
vue中获取/操作组件中的dom元素
最近刚做了一个项目,需要用到地图,选择的是腾讯地图,创建地图的时候,需要给地图创建函数中传入地图容器的id或者容器的dom元素,但是在调试过程中,发现怎么都无法获取dom元素,直接通过getEleme ...
Vue中获取dom元素的宽高
vue中获取dom元素的宽高 template模板中给dom绑定ref: <el-carouselid="ailabelmap"ref="remarkCarusel ...
electronjs设置宽度_Js操作DOM元素及获取浏览器高宽的简单方法
在JavaScript中,经常会来获取Document文档元素,是 HTML 文档对象模型的英文缩写,Document Object Model for HTML,是基于浏览器编程,HTML DOM ...
vue-html5-editor接收数据,在vue中获取wangeditor的html和text的操作
目的:vue 中获取 wangeditor 的 html 和 text. 补充知识:vue-cli webpack 引入 wangeditor(轻量级富文本框) 1:使用npm下载: //(注意 wa ...
vscode 一直显示Load project: XXXX，保存时提示“从 “‘Vetur‘, ‘Vue Language Features (Volar)‘“ (configure)中获取代码操作”
问题现象: vscode打开项目之后一直在底部提示一个通知:Load project: 当前项目,如下图所示: 在保存时提示:正在保存"Add.vue": 从 "'Vet ...
正在保存“index.vue”: 从 “‘Vetur‘, ‘ESLint‘“ (configure)中获取代码操作。
最近Vscode老是报正在保存"index.vue": 从 "'Vetur', 'ESLint'" (configure)中获取代码操作. 解决方案: 1.s ...

vue中获取并操作dom元素

vue中获取并操作dom元素相关推荐

最新文章

热门文章