基于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 浮动导航栏实现代码
Aug 27 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
Sep 29 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
javascript date格式化示例
Sep 25 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 Javascript
JS SetInterval 代码实现页面轮询
Aug 11 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
深入理解vue-class-component源码阅读
Feb 18 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
Nov 17 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 Javascript
vue 使用localstorage实现面包屑的操作
Nov 16 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求解三数之和问题详析
2020/11/09 PHP
在网页中屏蔽快捷键
2006/09/06 Javascript
js类的静态属性和实例属性的理解
2009/10/01 Javascript
纯js实现背景图片切换效果代码
2010/11/14 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
javascript运算符——位运算符全面介绍
2016/07/14 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
Node.js pipe实现源码解析
2017/08/12 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
详解JS浏览器事件循环机制
2019/03/27 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
基于windows下pip安装python模块时报错总结
2018/06/12 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
python__name__原理及用法详解
2019/11/02 Python
考试不及格检讨书
2014/01/09 职场文书
好人好事演讲稿
2014/09/01 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
先进学校事迹材料
2014/12/30 职场文书
张丽莉观后感
2015/06/16 职场文书
城南旧事读书笔记
2015/06/29 职场文书
《赵州桥》教学反思
2016/02/17 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers