基于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 相关文章推荐
jquery对dom的操作常用方法整理
Jun 25 Javascript
js解析json读取List中的实体对象示例
Mar 11 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
Jun 25 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
基于node下的http小爬虫的示例代码
Jan 11 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
用JS实现选项卡
Mar 23 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 Javascript
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
PHP 采集程序原理分析篇
2010/03/05 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
2018/03/20 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
微信小程序全选多选效果实现代码解析
2020/01/21 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
Python实现线程状态监测简单示例
2018/03/28 Python
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
python中Django文件上传方法详解
2020/08/05 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
企划专员岗位职责
2013/12/09 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
毕业生就业推荐表自我评价
2015/03/02 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server
SpringBoot整合Mybatis Generator自动生成代码
2021/08/23 Java/Android
OpenCV实现反阈值二值化
2021/11/17 Java/Android
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle