在vue.js 1.x和2.0中通过js实时监控输入值

1.js在vuejs2.0中实时监控输入。

在2.0版本中，vuejs将v-el和v-ref组合成一个ref属性，该属性可以由组件实例中的$refs调用。这意味着v-el:my-element将写成如下形式：ref='myElement '，v-ref3360my-component将变成如下形式：ref='myComponent '。当绑定到一般元素时，ref指的是DOM元素；当绑定到组件时，ref是组件的一个实例。

因为v-ref不再是一个指令，而是一个特殊的属性，所以它也可以动态定义。当与v-for结合使用时，这非常有用：

p v-for=' items in items ' v-bind : ref=' item ' item . id '/p以前，一起使用v-el/v-ref和v-for将产生一个DOM数组或组件数组，因为不可能给每个元素指定一个特定的名称。现在您仍然可以这样做，给每个元素相同的引用：

p v-for=' items in items ' ref=' items '/p与1.x不同，$refs没有响应，因为它们是在呈现期间注册/更新的。只有通过倾听变化和重复渲染，他们才能做出反应。另一方面，$refs主要是为js程序访问而设计的，不建议在模板中过度使用。因为这意味着访问实例外的实例状态，所以违反了Vue数据驱动的思想。

以下是vuejs2.0版本2.0的示例：

div id='example '输入类型=' text ' v-model=' items . type 1 ' ref=' type 1 '/输入类型=' text ' v-model=' items . type 2 ' ref=' type 2 '/Div类='show '输入框1的内容：{{items.type1}}/div类=' show '输入框2的内容：{{items.type2}}/div/div脚本varexample 1=new vue({ El : ' # example }，Data: { items }console.log(这。$ refs . type 2 . value)；}，deep : true}}，methods : { })/脚本结果如下所示：

在输入框中输入文本时，js可以实时监控指定输入框中文本的值。

其次，js在vuejs1.x中实时监控输入。

那么，在vuejs 1.x版本中，如何监控js中指定输入的值变化呢？

通过以下方式：

输入类型=' text ' v-model=' items . type 1 ' v-El : text type 1/然后收听vuejs中的手表：

watch : { items : { handler : function(val，oldval){ console.log(这。$ els . text type 1 . value)；}，deep:true }}整体代码：

Div id=' example ' input type=' text ' v-model=' items . type 1 ' v-El : text type 1/input type=' text ' v-model=' items . type 2 ' v-El : text type 2/Div class=' show '输入框1的内容：{ { items . type 1 } }/Div class=' show '输入框2的内容：{{items.type2}}/div/div脚本varexample 1=new vue({ El : ' # 1)}，deep : true}}，methods : { })/script具有以下效果：

当在输入框中输入字符时，js实时监控它们的变化值。

摘要

好了，这就是本文的全部内容。希望本文的内容能给你的学习或工作带来一些帮助。有问题可以留言交流。谢谢你的支持。