获取dom节点可以用ref属性,这个属性就是来获取dom对象的。看代码  这个属性就相当于给这个标签起了一个id样的东西

<input type="text" ref="userinfo" />

//获取ref定义的dom节点
console.log(this.$refs.userinfo);
alert(this.$refs.userinfo.value);

还有另外一种方法  仅限于点击事件

<input @input="handleInput" :value="value"/>

handleInput (event) {
const value = event.target.value
this.$emit('input', value)
}

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

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

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

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

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

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

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

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

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

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

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

  6. Vue获取DOM元素样式 && 样式更改

    在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误, 这时候可以在 mounted 里用 $refs 来获取样 ...

  7. ionic2 获取dom节点

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

  8. Vue获取dom和数据监听

    Vue获取dom对象 在js和jq中我们都能获取dom对象例如 // 获取id=1的div标签 <div id=d1>dom对象</div> // js语法 let ele = ...

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

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

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

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

随机推荐

  1. Android Dialog 简单封装

    转载:https://www.cnblogs.com/zjjne/archive/2013/10/03/3350382.html public class MyAlertDialog { //regi ...

  2. C# int数组转string字符串

    方式一:通过循环数组拼接的方式: int[] types = new int[] { 1, 2, 3, 4, 5, 6, 7, 8, 9 }; string result = string.Empty ...

  3. Spring04-SpringEL&Spring JDBC数据访问

    一. SpringEL入门 Spring动态语言(简称SpEL) 是一个支持运行时查询和操作对象图的强大的动态语言,语法类似于EL表达式,具有诸如显示方法和基本字符串模板函数等特性. 1. 准备工作 ...

  4. SpringMVC 集成Log4j

    项目地址:https://github.com/xiaoqiu-duan/DataProject.git 1.添加jar <dependency> <groupId>org.s ...

  5. 【BZOJ1565】【NOI2009】植物大战僵尸 网络流 最大权闭合子图

    题目大意 ​ 给你一个\(n\times m\)的地图,每个格子上都有一颗植物,有的植物能保护其他植物.僵尸从右往左进攻,每吃掉一颗植物就可以得到\(a_{i,j}\)的收益(\(a_{i,j}\)可 ...

  6. IDEA修改module的名字

    首先右键module名,选择[Refactor]-[Rename...] 然后选择[Rename module] 只修改这些对于当前开发是没有问题了 但是刚开始把module添加成maven项目的时候 ...

  7. 自学华为IoT物联网_11 物联网操作系统介绍

    点击返回自学华为IoT物流网 自学华为IoT物联网_11 物联网操作系统介绍 1.1  物联网面临的困难 物联网终端发展面临的困难:开发者需要懂硬件和芯片的差异,自行适配硬件接口 物联网开发面临的困难 ...

  8. 【BZOJ2242】计算器(BSGS,快速幂)

    [BZOJ2242]计算器(BSGS,快速幂) 题面 BZOJ 洛谷 1.给定y.z.p,计算y^z mod p 的值: 2.给定y.z.p,计算满足xy ≡z(mod p)的最小非负整数x: 3.给 ...

  9. Mac上连接nifi

      1.  open terminal 2.  ssh root@nifi.webus.cn 3. logs cd /var/lib/nifi/logs   4. view log tail -100 ...

  10. luogu5020 [NOIp2018]货币系统 (完全背包)

    我那个新的货币系统,就是把原来的货币系统中能被其他数表示的数删掉 那我就算有多少数能被别的数表示,那肯定是要被比它小的表示 于是排个序做完全背包就好了 但是我太zz不会完全背包,然后写了个bitset ...