<div  ref="wrapper">

Vue.js 提供了我们一个获取 DOM 对象的接口—— vm.$refs。在这里，我们通过了 this.$refs.wrapper访问到了这个 DOM 对象，并且我们在 mounted 这个钩子函数里，this.$nextTick 的回调函数中初始化
因为 Vue 是数据驱动的， Vue 数据发生变化（this.data = res.data）到页面重新渲染是一个异步的过程，我们的初始化时机是要在 DOM 重新渲染后，所以这里用到了 this.$nextTick，当然替换成 setTimeout(fn, 20) 也是可以的。

this.$nextTick(() => {console.log(this.$refs.wrapper)this.$refs.wrapper.style.color='red'
})

另外 this.$el 可以获取body下所有DOM节点

父页面获取子组件的所有属性

<moduleListMoney  ref='com' ></moduleListMoney>this.$refs.com.loder2 = false更改组件 子组件 moduleListMoney 某个元素中有 loder2 变量的值this.$refs.com 获取组件 moduleListMoney 所有元素的值

获取 child下面的节点

this.$refs['comImg'].childNodes

转载于:https://www.cnblogs.com/Model-Zachary/p/9042965.html

Vue提供操作DOM的方法相关推荐

VUE如何操作DOM
最近有些自闭,life is a shit,但是学习不能停,也开始继续健身了,试图让自己好一点. 这是学习VUE的第一篇博客,先来说一下准备工作.我们需要在谷歌商店安装vue-devtools插件,打 ...
使用Vue获取操作dom
vue一般是通过操作数据来实现界面的更新,通常不会去操作DOM,但实际开发场景总是千奇百怪,会有场景需要获取DOM 通过 ref 来获取dom元素建议:vue中尽量不去操作 dom 元素,选用 re ...
vue操作dom_vue源码全面解析（四十六）源码中操作DOM的方法集合
// 查找节点是否存在,如果不存在新建一个div元素返回function query (el) { if (typeof el === 'string') { var selected = docum ...
vue操作dom元素的三种方法介绍和分析
相信大家在做项目的时候,肯定会遇到这样的问题:我点击新增按钮,需要弹出个弹框,然后我点击对应的关闭按钮,关闭弹框,但是新增按钮和关闭按钮操作的是另一个元素,所以需要获取dom元素进行操控,那么在vue ...
jq添加或删除html元素,jQuery添加删除DOM元素方法详解
本文实例分析了jQuery添加删除DOM元素的方法.分享给大家供大家参考,具体如下: 介绍 DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面. 1.DOM ...
读Zepto源码之操作DOM
2019独角兽企业重金招聘Python工程师标准>>> 这篇依然是跟 dom 相关的方法,侧重点是操作 dom 的方法. 读Zepto源码系列文章已经放到了github上,欢迎sta ...
原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...
vue computed 中操作DOM和给对象添加属性遇到的问题
这两天使用vue做东西遇到一些问题,今天总结记录一下: 在computed中没法操作dom元素,比如 computed: {w() {return this.$refs.box.offsetWidth ...
Vue学习笔记（二十）——Vue为什么不推荐直接操作dom
Vue不推荐开发者直接操作dom(当然这并不表示不能这么做),有以下几个原因: 破坏了代码模块化结构导致代码腐化: 组件原本可以控制哪些dom操作可以对外暴露(即对应methods中的方法),但直接操 ...

Vue提供操作DOM的方法

另外 this.$el 可以获取body下所有DOM节点

父页面获取子组件的所有属性

获取 child下面的节点

Vue提供操作DOM的方法相关推荐

最新文章

热门文章