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 Dialog的内存泄露问题解决方法
Jun 18 Javascript
JavaScript编程中的Promise使用大全
Jul 28 Javascript
jQuery实现的Div窗口震动效果实例
Aug 07 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
Oct 10 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
jquery——九宫格大转盘抽奖实例
Jan 16 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
Feb 02 Javascript
在vue中实现简单页面逆传值的方法
Nov 27 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
OpenLayers3实现图层控件功能
Sep 25 Javascript
JavaScript 语句之常用 for 循环详解
Mar 29 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(6) 面向对象
2010/02/16 PHP
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
PHP分享图片的生成方法
2018/04/25 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
找到一点可怜的关于dojo资料,谢谢作者!
2006/12/06 Javascript
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
Javascript获取HTML静态页面参数传递值示例
2013/08/18 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
很酷的星级评分系统原生JS实现
2016/08/25 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
Python random模块的使用示例
2020/10/10 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
2014普法依法治理工作总结
2014/12/18 职场文书
总经理致辞
2015/07/29 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书
CentOS MySql8 远程连接实战
2022/04/19 MySQL
Nginx HTTP跳转至HTTPS
2022/05/15 Servers