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 ...
随机推荐
- C#winform窗体实现对sql server数据库的增删改查
1.运行效果截图 2.输入用户名,密码进行查询 查找成功则显示 查找不成功显示用户信息不存在 3.输入用户名与密码,向数据库中添加用户信息 添加后数据库表信息 4.查看全部信息 5.根据编号信息进行查 ...
- windows下怎样测试oracle安装是否成功以及在oracle中创建用户并赋予用户权限;和[Err] ORA-65096: 公用用户名或角色名无效的解决方案
测试oracle数据安装是否成功,可按顺序执行以下两个步骤: 测试步骤 1:请执行操作系统级的命令:tnsping orcl 上述命令假定全局数据库名是 orcl.以下是命令执行后的示例(请在cmd命 ...
- ClientImageViewController
package com.vcredit.ddcash.server.web.controller.common; import com.vcredit.ddcash.server.commons.mo ...
- sql server中的charindex函数用法解析(在一段字符中搜索字符或者字符串-----返回expression1在expression2出现的位置;反之,返回0)
https://blog.csdn.net/xinghuo0007/article/details/70651358 知识点一:charindex()语法 CHARINDEX ( expression ...
- torch.utils.data.DataLoader使用方法
数据加载器,结合了数据集和取样器,并且可以提供多个线程处理数据集.在训练模型时使用到此函数,用来把训练数据分成多个小组,此函数每次抛出一组数据.直至把所有的数据都抛出.就是做一个数据的初始化. 生成迭 ...
- TZOJ:3660: 家庭关系
描述 给定若干家庭成员之间的关系,判断2个人是否属于同一家庭,即2个人之间均可以通过这些关系直接或者间接联系. 输入 输入数据有多组,每组数据的第一行为一个正整数n(1<=n<=100), ...
- MSMQ 跨服务器读写队列的“消息队列系统的访问被拒绝”的解决方案
转自https://www.cnblogs.com/jyz/articles/4612333.html 最近项目中需要跨服务器对消息队列进行读写,开始在单独开发机器上进行Queue的读写没问题.但是部 ...
- 前端的图片压缩image-compressor(可在图片上传前实现图片压缩)
https://www.imooc.com/article/40038 https://www.jianshu.com/p/3ce3e3865ae2 前端的图片压缩image-compressor(可 ...
- GitHub学习总结
一.安装git:下载Git,官网地址:https://git-scm.com/,进入官网首页,然后点击download,下载对应系统的git就行. 二.我用的是win系统,打开git界面是这样的: 在 ...
- ajax 显示,删除,批量删除,修改反填功能实现
1.页面代码 <body> <h1>显示所有员工信息</h1> <input id="Button1" type="button ...