获取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. ajax 提交Dictionary

    ajax向webapi提交Dictionary Script: var data = { "a": 1, "b": 2, "c": &quo ...

  2. HDU4651 Partition 【多项式求逆】

    题目分析: 这题的做法是一个叫做五边形数定理的东西,我不会. 我们不难发现第$n$项的答案其实是: $$\prod_{i=1}^{\infty}\frac{1}{1-x^i}$$ 我们要对底下的东西求 ...

  3. Scrapy爬取伯乐在线文章

    首先搭建虚拟环境,创建工程 scrapy startproject ArticleSpider cd ArticleSpider scrapy genspider jobbole blog.jobbo ...

  4. 【XSY2760】nonintersect 计算几何

    题目描述 平面上有\(n\)条线段,你要擦掉所有线段但保留原有的\(2n\)个端点,然后连接这些端点形成\(n\)条不相交的线段,每个端点只能在一条线段中. 假设你画的线段总长为\(Y\),原有线段的 ...

  5. Ionic3实现选项卡切换可以重新加载echarts

    要求 选项卡每切换一次,就加载对应的一个echarts 图,要有一开始的动画效果效果如下: 注意点 1.echarts要想每次都能重新加载,需要移除"_echarts_instance_&q ...

  6. 安装 xadmin 报错: Command "python setup.py egg_info" failed with error code 1 in C:\Users\Python\AppData\Local\Temp\pip-install-1k1byg0p\xadmin\

    报错详情 安装 xadmin 组件的时候报错 不论是命令行还是 pycharm 方式都不行 分析报错 按照报错提示是说 README.rst 文件的编码问题导致. 解决报错 通过 github 下载源 ...

  7. SQL循环语句 详解

    SQL循环语句 declare @i int set @i=1 while @i<30 begin insert into test (userid) values(@i) set @i=@i+ ...

  8. MT【277】华中科技大学理科实验班选拔之三次方程

    (2015华中科技大学理科实验班选拔)已知三次方程$x^3+ax^2+bx+x=0$有三个实数根.(1)若三个实根为$x_1,x_2,x_3$,且$x_1\le x_2\le x_3,a,b$为常数, ...

  9. 「2017 Multi-University Training Contest 1」2017多校训练1

    1001 Add More Zero(签到题) 题目链接 HDU6033 Add More Zero 找出最大的k,使得\(2^m-1\ge 10^k\). 直接取log,-1可以忽略不计. #inc ...

  10. python3 元组tuple

    元组应小括号()表示: tuple(seq)将列表转换为一个元组: 不可变的,元组是不可变,但元素可以是可变数据类型: 可以迭代,可以切片: +连接元组,*复制元组: del不可以删除元素,但可以删除 ...