获取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. 微信小程序——代码片段汇集

    导航栏 作者:beatzcs       链接:https://www.jianshu.com/p/c681007a6287 这个导航虽然已经很完善了,不过还是要根据自己的来进行修改的 tabs.wx ...

  2. Git——入门操作加创建账号【三】

    创建账号 GitHub https://github.com/ 码云 https://gitee.com/ 无论是github还是码云,创建账号都是非常简单快捷的,大家可以自行选择创建下,不过建议最好 ...

  3. Matplotlib学习---用seaborn画联合分布图(joint plot)

    有时我们不仅需要查看单个变量的分布,同时也需要查看变量之间的联系,这时就需要用到联合分布图. 这里利用Jake Vanderplas所著的<Python数据科学手册>一书中的数据,学习画图 ...

  4. haar的简单应用(2)

    上次对图片进行了人脸识别,这次对摄像头捕获的内容进行识别 直接写注释来解释 import cv2 def CatchUsbVideo(window_name, camera_idx): #定义一个函数 ...

  5. HNOI2019

    省选总结 day0 写了下平时不经常写的模板,像什么\(LCT\),圆方树,\(exlucas\)之类的,但是一个都没考. day1 提前十几分钟进了考场,可以提前动电脑,赶紧把\(vimrc\)打了 ...

  6. Android assets res 文件夹的区别

    大家都知道建立一个Android项目后会产生assets与res的两个文件夹,理论上他们都是存放资源的文件夹,那么他们到底有什么区别呢? 1.assets:不会在R.java文件下生成相应的标记,存放 ...

  7. Redhat上为java Maven项目构建基于Jenkins + Github的持续集成环境

    在Redhat enterprise 6.5 的服务器上,为在gutub 上的 java mvaen项目构建一个持续集成环境,用到了Jenkins.因公司的服务器在内网,访问外网时要通过代理,所以为m ...

  8. 覆盖的面积 HDU - 1255 (扫描线, 面积交)

    求n个矩阵面积相交的部分,和求面积并一样,不过这里需要开两个数组保存覆盖一次和覆盖两次以上的次数的部分,还是模板,主要注意点就是pushup部分,如果我已经被两次覆盖,那我的两个数组在这个root点的 ...

  9. [HNOI2007]梦幻岛宝珠(背包)

    给你N颗宝石,每颗宝石都有重量和价值.要你从这些宝石中选取一些宝石,保证总重量不超过W,且总价值最大为,并输出最大的总价值.数据范围:N<=100;W<=2^30,并且保证每颗宝石的重量符 ...

  10. VSCode删除重复的空行

    输入^\s\n 选择使用正则表达式