vue-获取dom节点
获取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节点的更多相关文章
- vue的数据双向绑定和ref获取dom节点
vue是一个MVVM的框架 业务逻辑代码即js部分是model部分, html是view部分. 当model改变的时候,view也会改变 view 改变是,model也会改变 <template ...
- Vue 双向数据绑定、事件介绍以及ref获取dom节点
vue是一个MVVM的框架 M model V view MVVM model改变会影响视图view,view改变会影响model 双向数据绑定必须在表单里面使用 //我发现在谷歌浏览器翻译后的网页 ...
- React对比Vue(03 事件的对比,传递参数对比,事件对象,ref获取DOM节点,表单事件,键盘事件,约束非约束组件等)
import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
- 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定
接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...
- Vue获取DOM元素样式 && 样式更改
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误, 这时候可以在 mounted 里用 $refs 来获取样 ...
- ionic2 获取dom节点
ionic2页面上面获取dom节点,可以直接用原生的方法,document.querySelector()等, 但是不建议这样使用,建议使用官方的.就是要在获取的节点上加上#name的属性(相当于ge ...
- Vue获取dom和数据监听
Vue获取dom对象 在js和jq中我们都能获取dom对象例如 // 获取id=1的div标签 <div id=d1>dom对象</div> // js语法 let ele = ...
- 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离
关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...
- Omi框架学习之旅 - 获取DOM节点 及原理说明
虽然绝大部分情况下,开发者不需要去查找获取DOM,但是还是有需要获取DOM的场景,所以Omi提供了方便获取DOM节点的方式. 这是官网的话,但是我一直都需要获取dom,对dom操作,所以omi提供的获 ...
随机推荐
- Git——快速重命名文件和查看commit提交版本【四】
快速重命名文件 $ git mv README.md readme.md 使用git mv命令后直接commit即可,不再需要进行add或rm操作 查看版本历史 所有的参数都可以进行组合使用的,比如我 ...
- ContOS 常用命令
文件与目录操作 命令 解析 cd /home 进入 ‘/home’ 目录 cd .. 返回上一级目录 cd ../.. 返回上两级目录 cd - 返回上次所在目录 cp file1 file2 将fi ...
- springMVC整理03--处理数据模型 & 试图解析器 & @ResponseBody & HttpEntity
1.处理模型数据 SpringMVC 中的模型数据是非常重要的,因为 MVC 中的控制(C)请求处理业务逻辑来生成数据模型(M),而视图(V)就是为了渲染数据模型的数据.当有一个查询的请求,控制器(C ...
- 【XSY2785】模型
题目描述 给你一棵\(n\)个点的树,让你加最少的边,使得图中没有割点. 要求输出方案. \(n\leq 500000\) 题解 把叶子的权值设为\(1\),其他点设为\(0\),找出带权重心. 以重 ...
- urllib的实现---timeout,获取http响应码,重定向,proxy的设置
1.Timeout设置超时 只能修改Socket设置全局Timeout #! /usr/bin/env python3 import socket import urllib.request # ti ...
- 「SCOI2016」美味 解题报告
「SCOI2016」美味 状态极差无比,一个锤子题目而已 考虑每次对\(b\)和\(d\)求\(c=d \ xor \ (a+b)\)的最大值,因为异或每一位是独立的,所以我们可以尝试按位贪心. 如果 ...
- ELK部署详解--filebeat
filebeat.yml ###################### Filebeat Configuration Example ######################### # This ...
- [HEOI2014]平衡
[HEOI2014]平衡 转化为求选择k个数,和为(n+1)*k的方案数 保证,每个数[1,2*n+1]且最多选择一次. 限制k个很小,所以用整数划分的第二种方法 f[i][j],用了i个,和为j 整 ...
- 【CF263D】Cycle in Graph
题目大意:给定一个 N 个点,M 条边的无向图,保证图中每个节点的度数大于等于 K,求图中一条长度至少大于 K 的简单路径,输出长度和路径包含的点. 题解:依旧采用记录父节点的方式进行找环,不过需要记 ...
- Flask filter过滤器
简单的数据集体添加样式输出用管道过滤,除了flask模块以外不需要导其他的包 <head> <meta charset="UTF-8"> <meta ...