当前位置：首页 > 资讯 > 技术文档

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

时间：2020-02-03 20:04 编辑：来源：阅读：
扫一扫，手机访问

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

[b]一、vuejs 2.0中js实时监听input[/b] 在2.0的版本中，vuejs把v-el 和 v-ref 合并为一个 ref 属性了，可以在组件实例中通过 $refs 来调用。这意味着 [code]v-el:my-element [/code]将写成这样： [code]ref="myElement" [/code]， [code]v-ref:my-component [/code]变成了这样： [code]ref="myComponent"[/code] 。绑定在一般元素上时，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 数据驱动的思想。 [b]下面给一个vuejs2.0版本的例子：[/b]

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

[b]结果如图所示：[/b] [img]http://files.jb51.net/file_images/article/201703/201731595654032.png?201721595721[/img] 当在输入框输入文字的时候，js可以实时监听其指定输入框文本的值。 [b]二、vuejs 1.x中js实时监听input[/b] 那么在vuejs 1.x的版本中是如何在js中监听某个指定的input的value变化的呢？ [b]通过如下方式：[/b]

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

[b]然后在vuejs中的watch中监听：[/b]

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

[b]整体代码：[/b]

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

[b]实现的效果如图所示：[/b] [img]http://files.jb51.net/file_images/article/201703/201731595805146.png?201721595813[/img] 当在输入框中输入文字时，js中实时监听其变化的值。 [b]总结[/b] 好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程素材网的支持。

全部评论(0)

上一篇：vue2.0开发实践总结之入门篇
下一篇：基于vue实现swipe轮播组件实例代码

资讯排行榜
更多>>