本篇内容介绍了“vue如何实时监听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>
实现的效果如图所示:
Vue是一套用于构建用户界面的渐进式JavaScript框架,Vue与其它大型框架的区别是,使用Vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
“vue如何实时监听input值的变化”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。