基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍


Posted in Javascript onAugust 24, 2018

如下所示:

<!DOCTYPE html>
<html lang="en">
 
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" >
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="js/bootstrap.js"></script>
		<script src="js/vue.js"></script>
	</head>
 
	<body>
		<div id="example">
			<input type="text" v-model="items.type" ref="type" />
			<div class="show">输入框的内容:{{items.type}}</div>
		</div>
		<script>
			var example1 = new Vue({
				el: '#example',
				data: {
					items: {
						type: '千年之恋:'
					}
				},
				watch: {
					items: {
						handler: function() {
							alert(this.$refs.type.value);
						},
						deep: true
					}
				}
			})
		</script>
	</body>
 
</html>

基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍

ref 说明

<div class="touchscroll">

//

</div>

如果我们想要获取这个div的某个值,比如scrollTop的值,常规的做法是我们必须用document.querySelector(".touchScroll")获取这个dom节点,然后在获取scrollTop的值。

但是用ref绑定之后,我们就不需要在获取dom节点了,直接在上面的div上绑定div,然后$refs里面调用就行

因此上面可以写成:

<div class="touchscroll" ref='div'>

//

</div>

然后在javascript里面这样调用:

this.$refs.div.scrollTop.

这样就可以减少获取dom节点的消耗了!

以上这篇基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript模仿msgbox提示效果代码
Jun 10 Javascript
Jquery 基础学习笔记之文档处理
May 29 Javascript
理解Javascript_01_理解内存分配原理分析
Oct 11 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
angular 组件通信的几种实现方式
Jul 13 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
微信小程序配置服务器提示验证token失败的解决方法
Apr 03 Javascript
小程序实现上下移动切换位置
Sep 23 Javascript
vuex state中的数组变化监听实例
Nov 06 Javascript
一篇文章学会Vue中间件管道
Jun 20 Vue.js
element-ui 表格数据时间格式化的方法
Aug 24 #Javascript
vue select选择框数据变化监听方法
Aug 24 #Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 #Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 #jQuery
element-ui中的select下拉列表设置默认值方法
Aug 24 #Javascript
vue 登录滑动验证实现代码
Aug 24 #Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 #Javascript
You might like
Dedecms常用函数解析
2008/02/01 PHP
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
php ci 获取表单中多个同名input元素值的代码
2016/03/25 PHP
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
js实现拖拽元素选择和删除
2020/08/25 Javascript
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
Python实现ping指定IP的示例
2018/06/04 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
对pytorch的函数中的group参数的作用介绍
2020/02/18 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
Stylenanda中文站:韩国一线网络服装品牌
2016/12/22 全球购物
Java里面有没有全局变量?为什么?
2015/02/06 面试题
工商管理毕业生推荐信
2013/12/24 职场文书
出纳工作岗位责任制
2014/02/02 职场文书
个人安全生产承诺书
2014/05/22 职场文书
优秀毕业生求职信
2014/06/05 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang