基于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 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
Javascript 同时提交多个Web表单的方法
Feb 19 Javascript
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
Javascript学习笔记一 之 数据类型
Dec 15 Javascript
jquery获取checkbox的值并post提交
Jan 14 Javascript
JQuery操作textarea,input,select,checkbox方法
Sep 02 Javascript
JS中数组重排序方法
Nov 11 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 Javascript
详解JS中的快速排序与冒泡
Jan 10 Javascript
angularjs的select使用及默认选中设置
Apr 08 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 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
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
php生成EXCEL的东东
2006/10/09 PHP
php smarty模版引擎中变量操作符及使用方法
2009/12/11 PHP
PHP 正则表达式小结
2015/02/12 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
十分钟打造AutoComplete自动完成效果代码
2009/12/26 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
怎么清空javascript数组
2013/05/11 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
一些你可能不熟悉的JS知识点总结
2019/03/15 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
python 实现归并排序算法
2012/06/05 Python
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
Python之父谈Python的未来形式
2016/07/01 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
Django之编辑时根据条件跳转回原页面的方法
2019/08/21 Python
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
教师考核材料
2014/05/21 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
综合素质评价自我评价
2015/03/06 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书