vuejs 中如何优雅的获取 Input 值

原生 js

使用 getElementById 比较麻烦的地方

  • 需要为元素设置 id
  • 设置 id 之后,无法复用,因为一个页面中不能存在两个相同的 id

双向绑定 v-model

分两种情况

  • input 默认为空。这种情况使用 v-model 最方便,通过 this.inputName 即可获取到对应的值。
  • input 有默认值。即,设置了 value 属性的 Input。这种情况不能使用 v-model。否则 data 中的初始化值会把 value 的值覆盖掉。正确的姿势是使用 v-model, 然后通过 ajax 从后台拉取默认值,给对应的 vuejs 变量赋值。对于简单的后台渲染页面,这种方式略显复杂。

jQuery

不爽的地方包含了使用原生 js 的几项,同时还要额外引入 jQuery。

ref

在不适合使用 v-model 的时候,我更倾向于使用 ref.

vuejs 2.0 之后,废弃了 vuejs 1.0 中的 this.$els,改用 this.$refs。即,使用 ref 属性来标识一个元素。 


demo.html:


demo.js:


vue.min.js:6 Uncaught ReferenceError: input2 is not defined

这是一个比较奇葩的问题,如果 v-model 的变量不在 data 中初始化,就会报这个错误。 不知道是否是 vuejs 2.0 新引入的机制,在 1.0 中没有发现这个问题。


转载自:https://www.sunzhongwei.com/how-to-get-input-value-in-vuejs

猜你喜欢

转载自blog.csdn.net/qq_38188485/article/details/80587420