vue2.*版本中

在标签中加上ref='dom'，然后在代码中this.$refs.dom这样就拿到了页面元素

例如：<div class='box' ref='myBox'>你好</div>

让你好的颜色显示为红色：this.$refs.myBox.style.color = 'red

vue2获取dom节点的更多相关文章

  1. ionic2 获取dom节点

    ionic2页面上面获取dom节点,可以直接用原生的方法,document.querySelector()等, 但是不建议这样使用,建议使用官方的.就是要在获取的节点上加上#name的属性(相当于ge ...

  2. vue的数据双向绑定和ref获取dom节点

    vue是一个MVVM的框架 业务逻辑代码即js部分是model部分, html是view部分. 当model改变的时候,view也会改变 view 改变是,model也会改变 <template ...

  3. 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离

    关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...

  4. Vue 双向数据绑定、事件介绍以及ref获取dom节点

    vue是一个MVVM的框架 M model V view MVVM  model改变会影响视图view,view改变会影响model 双向数据绑定必须在表单里面使用 //我发现在谷歌浏览器翻译后的网页 ...

  5. Omi框架学习之旅 - 获取DOM节点 及原理说明

    虽然绝大部分情况下,开发者不需要去查找获取DOM,但是还是有需要获取DOM的场景,所以Omi提供了方便获取DOM节点的方式. 这是官网的话,但是我一直都需要获取dom,对dom操作,所以omi提供的获 ...

  6. React对比Vue（03 事件的对比，传递参数对比，事件对象，ref获取DOM节点，表单事件，键盘事件，约束非约束组件等)

    import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...

  7. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

  8. 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定

    接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...

  9. vue2.* 双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点 04

    <template> <div id="app"> <!-- 双向数据绑定(必须在表单里面使用) m:model v:view mvvm:model改 ...

随机推荐

  1. java猜数游戏

    java随机数的产生 int number=(int)(Math.random()*10+1) Math.random()*n //n个随机数,从0开始 do{}while循环 //猜数,1到10的随 ...

  2. Spring Security 入门（一）

    当你看到这篇文章时,我猜你肯定是碰到令人苦恼的问题了,我希望本文能让你有所收获. 本人几个月前还是 Spring 小白,几个月走来,看了 Spring,Spring boot,到这次的 Spring ...

  3. DM7经常使用的命令汇总

    由于DM7兼容oracle ,所以当你不知道某个命令时,大抵就是可以参照oracle的命令及语法,当然有极少的情况会不一样.常用命令如下: 1.连接登录 disql SYSDBA/SYSDBA@223 ...

  4. [POJ3107] Godfather - 暴力枚举（树的重心）

    Godfather Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 8728   Accepted: 3064 Descrip ...

  5. 关于Linux中的 localhost 默认地址简单介绍

    大家都知道localhost指的是本机的IP地址:127.0.0.1 用于回路测试,那能不能修改localhost呢,答案肯定是可以的 打开终端--->输入: vim /etc/host  然后 ...

  6. SQlserver高效分页，还在使用row_number(),top之类的？

    row_number() ,还是top 这些分页的方法比较老了,效率不是很高效的, Sqlserve2012就有了,效率对比比较明显,尤其是数据比较大的情况下(我们可以观看查询执行计划) Offset ...

  7. 数据结构（二十七）Huffman树和Huffman编码

    Huffman树是一种在编码技术方面得到广泛应用的二叉树,它也是一种最优二叉树. 一.霍夫曼树的基本概念 1.结点的路径和结点的路径长度:结点间的路径是指从一个结点到另一个结点所经历的结点和分支序列. ...

  8. C#基本网络操作

    建档操作如ping,查询本机主机ip,同步异步查询局域网内主机,同步异步邮件发送等 1)ping 通过ping类测试网络 using System; using System.Text; using ...

  9. Mycat分布式数据库架构解决方案--Mycat实现读写分离

    echo编辑整理,欢迎转载,转载请声明文章来源.欢迎添加echo微信(微信号:t2421499075)交流学习. 百战不败,依不自称常胜,百败不颓,依能奋力前行.--这才是真正的堪称强大!!! 安装完 ...

  10. Flask：Flask中使用会话技术

    1.会话技术cookie和session (1)cookie 在网站中,HTTP请求是无状态的.也就是说,即使第一次用户访问服务器并登录成功后,第二次请求服务器依然不知道当前发起请求的是哪个用户.co ...