未加星标

vuejs2.0与1.x版本中怎样使用js实时访问input的值的变化

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏
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>

结果如图所示:


vuejs2.0与1.x版本中怎样使用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>

实现的效果如图所示:


vuejs2.0与1.x版本中怎样使用js实时访问input的值的变化

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

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 数据供给
分页:12
转载请注明
本文标题:vuejs2.0与1.x版本中怎样使用js实时访问input的值的变化
本站链接:http://www.codesec.net/view/531204.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(92)