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. Tomcat基本知识（一）

    顶层架构先上一张Tomcat的顶层结构图(图A),如下: Tomcat中最顶层的容器是Server,代表着整个服务器,从上图中可以看出,一个Server可以包含至少一个Service,用于具体提供服务 ...

  2. 程序员IT狗有什么副业可以做呢？

    1. 开篇 副业有很多,全网有做什么公众号.闲鱼.手机卡,各种各样的都有,大部分是骗子,小部分是通过自己的努力,获得了成功. 从年初就开始实践如何做一个自由职业者,近大半年有一些感受正好一起分享交流一 ...

  3. App自动化环境搭建

    1.安装Appium-desktop工具 下载地址:https://github.com/appium/appium-desktop/releases/tag/v1.8.2 2.安装Android环境 ...

  4. 帝国CMS 6.5功能解密：网站安全防火墙使用说明

    有关帝国CMS新版防火墙介绍可以查看:http://bbs.phome.net/showthread-13-136169-0.html 本文为大家讲解如何使用网站防火墙:一.配置“网站防火墙”有下面两 ...

  5. 客户端 SOCKET 编程

    建立客户端的 Socket: 客户端应用程序首先也是调用 WSAStartup() 函数来初始化 Winsock 的动态连接库,然后同样 调用 socket() 来建立一个 TCP 或 UDP Soc ...

  6. Linux提权中常见命令大全

    在拿到一个 webshell 之后,大家首先会想到去把自己的权限提升到最高,windows 我们会提升到 SYSTEM 权限,而 Linux 我们会提升到 root 权限,拿在进行 Linux 提权的 ...

  7. HMLT clear 属性

    原文 : http://www.zhangxinxu.com/wordpress/2014/06/understand-css-clear-left-right-and-use/ clear 的四个值 ...

  8. 基于mysql-8.0.16-winx64的主从搭建

    1.主服务器的my.ini文件内容:[mysqld]# 主库和从库需要不一致server-id=1log-bin=mysql-bin# 同步的数据库binlog-do-db=master-slave# ...

  9. [洛谷P3709]大爷的字符串题

    题目传送门 不用管它随机什么的,就用贪心的思想去想, 会发现这道题的实质是:求查询区间众数出现次数. 莫队即可解决. 注意字符集1e9,要离散化处理. #include <bits/stdc++ ...

  10. [最新方法]终于解决了 Ubuntu 14.04 网络图标不见了 的问题|Ubuntu14.04 网络图标消失

    解决 Ubuntu 14.04 网络图标不见了 消失的问题   这个问题困扰了我大半年了.但是我就硬是不想重新装系统.搜索研究一番发现,这个问题是nm-applet的问题.   然后偶然发现nm-ap ...