Vue提供操作DOM的方法
<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的方法的更多相关文章
- 第七十六篇:ref引用(在vue中引用Dom的方法)
好家伙, 引子: jQuery简化了程序员操作DOM的过程 vue 优势:MVVM 在vue中,程序员不需要操作DOM.程序员只需要把数据维护好即可!(数据驱动视图) 那么若要在vue中操作dom,这 ...
- vue中操作Dom节点的方法
1.vue中ref操作dom节点 <template> <div id="app"> <div </div> <button @cl ...
- vue $refs操作DOM
原文链接:https://www.cnblogs.com/xumqfaith/p/7743387.html 如图,ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象 ...
- javascript操作DOM的方法与属性
文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构. 将HTML代码分解为DOM节点层次图: ...
- 原生js操作dom的方法
今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. documen ...
- 在vue中操作dom元素
在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而达到操作该dom元素,以下是个参考例子 1 <template> 2 <div> 3 <div ...
- Vue中获取dom元素
Vue.js虽然说是数据驱动页面的,但是有时候我们也要获取dom对象进行一些操作. vue的不同版本获取dom对象的方法不一样 Vue.js 1.0版本中,通过v-el绑定,然后通过this.els ...
- 直接操作DOM一定比虚拟DOM操作耗时,diff算法,key值,虚拟 DOM的定义
直接操作DOM一定比虚拟DOM操作耗时吗? 或者一次直接DOM操作一定比一次虚拟DOM操作耗时吗? 1)虚拟DOM的本质就是一个JS对象,虚拟DOM减少了真实DOM的操作,当修改数据的时候,就是修改虚 ...
- 读Zepto源码之操作DOM
这篇依然是跟 dom 相关的方法,侧重点是操作 dom 的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1 ...
随机推荐
- 支持多文件上传,预览,拖拽,基于bootstrap的上传插件fileinput 的ajax异步上传(转载)
首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"&g ...
- duilib中字体font设置
<Font name="微软雅黑" size="9" bold="false"/> <Label name="n ...
- Python学习之旅(二十七)
Python基础知识(26):常用内建模块(Ⅱ) 1.hashlib Python的hashlib提供了常见的摘要算法,如MD5,SHA1等 摘要算法又称哈希算法.散列算法. (1)它通过一个函数,把 ...
- FTPService工具类
package com.vcredit.ddcash.server.commons.net; import com.vcredit.ddcash.server.commons.model.FtpPar ...
- ASP返回JQuery EasyUI树形要求的JSON格式
根据http://blog.csdn.net/apollokk/article/details/41382479中提供的数据将结果格式化为JQuery EasyUI树形要求的JSON格式 <% ...
- python全栈开发 * 12 知识点汇总 * 180530
12 知识点总结 装饰器进阶 ⼀. 通⽤装饰器的回顾1.开闭原则: 对增加功能开放. 对修改代码封闭2.装饰器的作⽤: 在不改变原有代码的基础上给⼀个函数增加功能3.通⽤装饰器的写法:def wrap ...
- layer[申明:来源于网络]
layer[申明:来源于网络] 地址:http://layer.layui.com/
- RFID世界网
RFID世界网 地址:http://www.rfidworld.com.cn/NFC/
- Codeforces 1090M - The Pleasant Walk - [签到水题][2018-2019 Russia Open High School Programming Contest Problem M]
题目链接:https://codeforces.com/contest/1090/problem/M There are n houses along the road where Anya live ...
- C# 让String.Contains忽略大小写
在C#里,String.Contains是大小写敏感的,所以如果要在C#里用String.Contains来判断一个string里是否包含一个某个关键字keyword,需要把这个string和这个ke ...