基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
如下所示:
<!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>
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的使用说明介绍就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue-resource + json-server模拟数据的方法
本篇文章主要介绍了vue-resource + json-server模拟数据的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-11-11关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
这篇文章主要介绍了关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法,实现方法有两种,本文通过实例代码对每种方法介绍的很详细,需要的朋友参考下2018-12-12element-ui动态添加表单项并实现事件触发验证代码示例
这篇文章主要给大家介绍了关于element-ui动态添加表单项并实现事件触发验证的相关资料,其实就是利用了vue的v-for循环渲染,通过添加数组实现动态添加表单项,需要的朋友可以参考下2023-12-12vue使用pdfjs-dist+fabric实现pdf电子签章的思路详解
最近领导提了一个新需求:仿照e签宝,实现pdf电子签章,本文给大家介绍vue使用pdfjs-dist+fabric实现pdf电子签章的思路,感兴趣的朋友一起看看吧2023-12-12
最新评论