Vue 2.0 监听文本框内容变化及 ref的使用说明
来源:互联网 发布:手机电玩城刷分币软件 编辑:程序博客网 时间:2024/05/21 06:19
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/bootstrap.css"><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节点的消耗了
阅读全文
0 0
- Vue 2.0 监听文本框内容变化及 ref的使用说明
- jQuery 监听文本框内容变化
- UITextView、UITextField监听文本框中内容的变化
- iOS - UITextView、UITextField监听文本框中内容的变化
- 文本框监听输入内容变化事件
- 监听文本框的文字变化
- vue watch监听对象及对应值的变化
- 监听div内容的变化
- ios 监听文本框文字的变化
- js 小技巧之监听文本框内容变化
- 监听EditText内容变化及字数限制
- 理解Vue 2.0 的ref属性及简单用法
- 记录文本框内容的动态变化
- Vue监听数据变化
- 监听Android中ContentProvider内容的变化
- Android数据库内容变化的监听
- Android数据库内容变化的监听
- jquery 如何监听div内容的变化
- Requests库的使用
- 详解WSAEventSelect网络模型
- sizeof用法
- Linux缓冲区
- Haskell语言学习笔记(34)System.Environment
- Vue 2.0 监听文本框内容变化及 ref的使用说明
- JAVA BIO 回顾
- 从kafka中获取数据写入到redis中
- Linux mysql数据库设置区分大小写lower_case_table_names
- Maximum Depth of Binary Tree
- ubuntu下配置python开发环境
- 冒泡排序及C++/java代码实现(BubbleSort)
- 三诺·珊瑚群创新加速器正式启动:新一代生态型创新加速器 中国创业创新
- 行业首款智能手表跟拍与避障无人机XEagle亮相高交会