vue.js中如何实时监听input值的变化
这篇文章主要讲解了“vue.js中如何实时监听input值的变化”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue.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 结合的时候是很有用的:
以前 v-el/v-ref 和 v-for 一起使用将产生一个DOM数组或者组件数组,因为没法给每个元素一个特定名字。现在你还仍然可以这样做,给每个元素一个同样的ref:
和 1.x 中不同, $refs 不是响应的,因为它们在渲染过程中注册/更新。只有监听变化并重复渲染才能使它们响应。另一方面,设计$refs主要是提供给 js 程序访问的,并不建议在模板中过度依赖使用它。因为这意味着在实例之外去访问实例状态,违背了 Vue 数据驱动的思想。
下面给一个vuejs2.0版本的例子:
输入框一的内容:{{items.type1}}输入框二的内容:{{items.type2}}
结果如图所示:
当在输入框输入文字的时候,js可以实时监听其指定输入框文本的值。
二、vuejs 1.x中js实时监听input
那么在vuejs 1.x的版本中是如何在js中监听某个指定的input的value变化的呢?
通过如下方式:
然后在vuejs中的watch中监听:
watch:{ items:{ handler:function(val,oldval){ console.log(this.$els.texttype1.value); }, deep:true } }
整体代码:
输入框一的内容:{{items.type1}}输入框二的内容:{{items.type2}}
实现的效果如图所示:
感谢各位的阅读,以上就是“vue.js中如何实时监听input值的变化”的内容了,经过本文的学习后,相信大家对vue.js中如何实时监听input值的变化这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!
当前文章:vue.js中如何实时监听input值的变化
浏览地址:http://scyanting.com/article/psdssd.html