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 相关文章推荐
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
正则表达式搭配js轻松处理json文本方便而老古
Feb 17 Javascript
JQuery跳出each循环的方法
Apr 16 Javascript
jquery小火箭返回顶部代码分享
Aug 19 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
AngularJS入门教程之Helloworld示例
Dec 25 Javascript
JS优化与惰性载入函数实例分析
Apr 06 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
vue双向绑定数据限制长度的方法
Nov 04 Javascript
详解JSON.stringify()的5个秘密特性
May 26 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 isset()与empty()的使用区别详解
2010/08/29 PHP
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
php实现搜索类封装示例
2016/03/31 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
jQuery 遍历函数详解
2015/07/05 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
基于Python的文件类型和字符串详解
2017/12/21 Python
python实现Adapter模式实例代码
2018/02/09 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
python实现Pyecharts实现动态地图(Map、Geo)
2020/03/25 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
联想德国官网:Lenovo Germany
2018/07/04 全球购物
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
造价工程师个人求职信
2013/09/21 职场文书
项目经理聘任书
2014/03/29 职场文书
对外汉语专业大学生职业生涯规划书
2014/10/11 职场文书
机关作风建设整改方案
2014/10/27 职场文书
2015年检验科工作总结
2015/04/27 职场文书
用python画城市轮播地图
2021/05/28 Python
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript