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

 更新时间:2017年03月15日 10:00:03   作者:风雨后见彩虹  
这篇文章主要介绍了vue.js 1.x与vue.js2.0中js实时监听input值的变化的相关资料,文中介绍的非常详细,对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。

一、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>

结果如图所示:

当在输入框输入文字的时候,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>

实现的效果如图所示:

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

总结

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

相关文章

  • vue拦截器实现统一token,并兼容IE9验证功能

    vue拦截器实现统一token,并兼容IE9验证功能

    这篇文章主要介绍了vue拦截器实现统一token,并兼容IE9验证功能,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2018-04-04
  • 在vue中给后台接口传的值为数组的格式代码

    在vue中给后台接口传的值为数组的格式代码

    这篇文章主要介绍了在vue中给后台接口传的值为数组的格式代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue.js递归组件实现组织架构树和选人功能

    Vue.js递归组件实现组织架构树和选人功能

    这篇文章主要介绍了Vue.js递归组件实现组织架构树和选人功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • vue动态设置img的src路径实例

    vue动态设置img的src路径实例

    今天小编就为大家分享一篇vue动态设置img的src路径实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 在 Vue 中编写 SVG 图标组件的方法

    在 Vue 中编写 SVG 图标组件的方法

    这篇文章主要介绍了在 Vue 中编写 SVG 图标组件的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • VUE实现密码验证与提示功能

    VUE实现密码验证与提示功能

    这篇文章主要为大家详细介绍了VUE实现密码验证与提示功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • vue params、query传参使用详解

    vue params、query传参使用详解

    本篇文章主要介绍了vue params、query传参使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 浅谈Vue使用Cascader级联选择器数据回显中的坑

    浅谈Vue使用Cascader级联选择器数据回显中的坑

    这篇文章主要介绍了浅谈Vue使用Cascader级联选择器数据回显中的坑,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue.js实现条件渲染的实例代码

    vue.js实现条件渲染的实例代码

    这篇文章主要介绍了vue.js实现条件渲染的实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • Vue实现简易翻页效果源码分享

    Vue实现简易翻页效果源码分享

    本文给大家分享了vue实现简易翻页效果,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-11-11

最新评论