获取输入框的值

js

使用 getElementById 比较麻烦的地方

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

jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作。

<input class="login_input" placeholder="请输入账号" type="text" id="username"/>

    如上面一段代码，如果jQuery想要获取input的数据通常的做法是根据id获取，$('#username').val()。

Vue在这里做法和jQuery有细微区别，jQuery是通过id获取对应节点然后获取数据，而Vue则是通过Vue对象将数据和View完全分离开来了。通过ref获取input数据。username = this.$refs.username.value。

<input class="login_input" placeholder="请输入账号" type="text" ref="username"/>

注意两则代码中的区别，一个是id一个是ref。

3种vue方式获取页面输入框的值，

一是用v-bind:value + ref方式获取，这种只适用有具体的输入框才行，

比如登录页，只有帐号密码输入框，

二是用v-model方式获取，

分两种情况

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

这种是修改原始list值，所以在提交时，还需要遍历下原来的list，有点麻烦，

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

三是用v-model + ref，和2的区别是在提交时，直接用ref取值，感觉在未知数量的输入框时更好用

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