vue.js 1.x与2.0中js实时监听input值的变化


Posted in Javascript onMarch 15, 2017

一、vuejs 2.0中js实时监听input

在2.0的版本中,vuejs把v-el 和 v-ref 合并为一个 ref 属性了,可以在组件实例中通过 $refs 来调用。这意味着 v-el:my-element 将写成这样: ref="myElement" v-ref:my-component 变成了这样: ref="myComponent" 。绑定在一般元素上时,ref 指DOM元素,绑定在组件上时,ref 为一组件实例。

因为 v-ref 不再是一个指令了而是一个特殊的属性,它也可以被动态定义了。这样在和v-for 结合的时候是很有用的:

<p v-for="item in items" v-bind:ref="'item' + item.id"></p>

以前 v-el/v-ref 和 v-for 一起使用将产生一个DOM数组或者组件数组,因为没法给每个元素一个特定名字。现在你还仍然可以这样做,给每个元素一个同样的ref:

<p v-for="item in items" ref="items"></p>

和 1.x 中不同, $refs 不是响应的,因为它们在渲染过程中注册/更新。只有监听变化并重复渲染才能使它们响应。另一方面,设计$refs主要是提供给 js 程序访问的,并不建议在模板中过度依赖使用它。因为这意味着在实例之外去访问实例状态,违背了 Vue 数据驱动的思想。

下面给一个vuejs2.0版本的例子:

<div id="example">
 <input type="text" v-model="items.type1" ref="type1"/>
 <input type="text" v-model="items.type2" ref="type2"/>
 <div class="show">输入框一的内容:{{items.type1}}</div>
 <div class="show">输入框二的内容:{{items.type2}}</div>
</div>
<script>
 var example1 = new Vue({
  el: '#example',
  data: {
  items: {
   type1:'第一个输入框',
   type2:'第二个输入框'
  }
  },
  ready:function(){
   
  },
  watch:{
   items:{
    handler:function(val,oldval){
     console.log(this.$refs.type1.value);
     console.log(this.$refs.type2.value);
    },
    deep:true
   }
  },
  methods:{
  
  }
 })
</script>

结果如图所示:

vue.js 1.x与2.0中js实时监听input值的变化

当在输入框输入文字的时候,js可以实时监听其指定输入框文本的值。

二、vuejs 1.x中js实时监听input

那么在vuejs 1.x的版本中是如何在js中监听某个指定的input的value变化的呢?

通过如下方式:

<input type="text" v-model="items.type1" v-el:texttype1/>

然后在vuejs中的watch中监听:

watch:{
 items:{
  handler:function(val,oldval){
   console.log(this.$els.texttype1.value);
  },
  deep:true
 }
}

整体代码:

<div id="example">
 <input type="text" v-model="items.type1" v-el:texttype1/>
 <input type="text" v-model="items.type2" v-el:texttype2/>
 <div class="show">输入框一的内容:{{items.type1}}</div>
 <div class="show">输入框二的内容:{{items.type2}}</div>
</div>
<script>
 var example1 = new Vue({
  el: '#example',
  data: {
  items: {
   type1:'第一个输入框',
   type2:'第二个输入框'
  }
  },
  ready:function(){
   
  },
  watch:{
   items:{
    handler:function(val,oldval){
     console.log(this.$els.texttype1.value);
    },
    deep:true
   }
  },
  methods:{
  
  }
 })
</script>

实现的效果如图所示:

vue.js 1.x与2.0中js实时监听input值的变化

当在输入框中输入文字时,js中实时监听其变化的值。

总结

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
基于jQuery的树控件实现代码(asp.net+json)
Jul 11 Javascript
JS实现可改变列宽的table实例
Jul 02 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
详解javascript new的运行机制
Jan 26 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 Javascript
简单实现AngularJS轮播图效果
Apr 10 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
Node.js 中使用 async 函数的方法
Nov 20 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
基于js实现的图片拖拽排序源码实例
Nov 04 Javascript
js仿淘宝商品放大预览功能
Mar 15 #Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 #Javascript
javascript九宫格图片随机打乱位置的实现方法
Mar 15 #Javascript
JavaScript实现审核流程状态的动态显示进度条
Mar 15 #Javascript
js实现自定义进度条效果
Mar 15 #Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 #Javascript
jQuery模拟窗口抖动效果
Mar 15 #Javascript
You might like
php array_map()数组函数使用说明
2011/07/12 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
PHP图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
php计算函数执行时间的方法
2015/03/20 PHP
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
vue实现页面切换滑动效果
2020/06/29 Javascript
Python中用sleep()方法操作时间的教程
2015/05/22 Python
python协程用法实例分析
2015/06/04 Python
python实现的简单RPG游戏流程实例
2015/06/28 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
python批量赋值操作实例
2018/10/22 Python
python调用外部程序的实操步骤
2019/03/04 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
navabi英国:设计师大码女装
2019/06/25 全球购物
大学生毕业自我评价范文分享
2013/11/07 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
世界文化遗产导游词
2019/08/07 职场文书
MySQL 数据库范式化设计理论
2022/04/22 MySQL