<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, ) 也是可以的。
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

Vue提供操作DOM的方法的更多相关文章

  1. 第七十六篇:ref引用(在vue中引用Dom的方法)

    好家伙, 引子: jQuery简化了程序员操作DOM的过程 vue 优势:MVVM 在vue中,程序员不需要操作DOM.程序员只需要把数据维护好即可!(数据驱动视图) 那么若要在vue中操作dom,这 ...

  2. vue中操作Dom节点的方法

    1.vue中ref操作dom节点 <template> <div id="app"> <div </div> <button @cl ...

  3. vue $refs操作DOM

    原文链接:https://www.cnblogs.com/xumqfaith/p/7743387.html 如图,ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象 ...

  4. javascript操作DOM的方法与属性

    文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构. 将HTML代码分解为DOM节点层次图: ...

  5. 原生js操作dom的方法

    今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. documen ...

  6. 在vue中操作dom元素

    在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而达到操作该dom元素,以下是个参考例子 1 <template> 2 <div> 3 <div ...

  7. Vue中获取dom元素

    Vue.js虽然说是数据驱动页面的,但是有时候我们也要获取dom对象进行一些操作. vue的不同版本获取dom对象的方法不一样 Vue.js  1.0版本中,通过v-el绑定,然后通过this.els ...

  8. 直接操作DOM一定比虚拟DOM操作耗时,diff算法,key值,虚拟 DOM的定义

    直接操作DOM一定比虚拟DOM操作耗时吗? 或者一次直接DOM操作一定比一次虚拟DOM操作耗时吗? 1)虚拟DOM的本质就是一个JS对象,虚拟DOM减少了真实DOM的操作,当修改数据的时候,就是修改虚 ...

  9. 读Zepto源码之操作DOM

    这篇依然是跟 dom 相关的方法,侧重点是操作 dom 的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1 ...

随机推荐

  1. PHP计算显示平均温度、五个最低及最高温度

    <?php $month_temp = "78, 60, 62, 68, 71, 68, 73, 85, 66, 64, 76, 63, 81, 76, 73, 68, 72, 73, ...

  2. 计算属性和监听,computed,watch

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. php三级联动(html,php两个页面)

    <!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...

  4. 固定浮动侧边栏(SmartFloat)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. linux--- python3环境部署篇

    环境部署 我们在pycharm上都是自己设置的python3解释器的环境变量,使得代码能够正常执行!可是怎么能让我们的python代码在LINUX上跑起来呢? linux是内置python,可是内置的 ...

  6. ASP.NET Core 实现跨站登录重定向的新姿势

    作为 .NET 程序员,痛苦之一是自从 ASP.NET 诞生之日起直到最新的 ASP.NET Core 都无法直接实现跨站登录重定向(比如访问 https://q.cnblogs.com ,跳转到 h ...

  7. Mycat了解下

    首先说下,因为本身不怎么推荐中间件,所以我对这东西也只是了解,业内mycat用的最好的应该顺风算一个,但是他们是做过二次开发的,咱菜鸡比不了,据说最近出来一个叫cetus的还不错,有空可以关注下 Ⅰ. ...

  8. FastJson一些常见方法(API):处理JSON变得好简单

    fastjson是目前java语言中最快的json库,比自称最快的jackson速度要快,第三方独立测试结果说明比gson快大约6倍 JSON帮助类 这个可以做一个实例研究代码,也可以作为一个工具类 ...

  9. 腾讯TBS加载网页无法自适应记录

    1.  所遇到的问题 webview加载指定网页无法实现自适应,之前在加载重构一个网页的时候,其实也遇到这种问题,然后就有了下面的一下步骤 WebSettings webSettings = view ...

  10. python基础(13)-面向对象

    类 类的定义和使用 # class Person: def __init__(self, name, age, gender): self.name = name self.age = age sel ...