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 相关文章推荐
JavaScript 三种创建对象的方法
Oct 16 Javascript
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
ie支持function.bind()方法实现代码
Dec 27 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
Aug 28 Javascript
详解如何在Angular中快速定位DOM元素
May 17 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
JavaScript实现短暂提示框功能
Apr 04 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 Javascript
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 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新手上路(十四)
2006/10/09 PHP
通过Unicode转义序列来加密,按你说的可以算是混淆吧
2007/05/06 Javascript
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
Mootools 1.2教程 事件处理
2009/09/15 Javascript
javascript类型转换示例
2014/04/29 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
JavaScript实用代码小技巧
2018/08/23 Javascript
bootstrap下拉分页样式 带跳转页码
2018/12/29 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
基于原生js实现判断元素是否有指定class名
2020/07/11 Javascript
简介JavaScript错误处理机制
2020/08/04 Javascript
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
[50:20]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第四局
2016/03/06 DOTA
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python在groupby分组后提取指定位置记录方法
2018/04/20 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
Python实现SQL注入检测插件实例代码
2019/02/02 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
使用python检查yaml配置文件是否符合要求
2020/04/09 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
aec加密 php_php aes加密解密类(兼容php5、php7)
2021/03/14 PHP
乌克兰在线药房:Аптека24
2019/10/30 全球购物
逻辑链路控制协议
2016/10/01 面试题
篮球赛口号
2014/06/18 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android