vue中获得input的值

原生 js使用 getElementById 比较麻烦的地方需要为元素设置 id设置 id 之后，无法复用，因为一个页面中不能存在两个相同的 id双向绑定 v-model分两种情况input 默认为空。这种情况使用 v-model 最方便，通过 this.inputName 即可获取到对应的值。input 有默认值。即，设置了 value 属性的 Input。这种情况不能使用 v-model。否则

tianming-tom

37567人浏览 · 2018-05-19 16:16:48

tianming-tom · 2018-05-19 16:16:48 发布

原生 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 属性来标识一个元素。这个地方抄袭 reactjs 太明显了。

demo.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Index Page</title>
</head>

<body>
  <form action="" id="demo">
    <input type="text" value="调试 vuejs 2.0" ref="input1">
    <a href="javascript:void(0)" v-on:click="test1">测试</a>
    <br>
    <span>{{ result1 }}</span>
    <br>

    <input type="text" v-model="input2">
    <a href="javascript:void(0)" v-on:click="test2">测试</a>
    <br>
    <span>{{ result2 }}</span>
  </form>

  <script src="https://cdn.bootcss.com/vue/2.0.3/vue.min.js"></script>
  <script type="text/javascript" src="demo.js"></script>
</body>

</html>

demo.js

new Vue({
    el: "#demo",

    data: {
        result1: null,
        result2: null,
        input2: ""
    },

    created: function() {
        // the created hook is called after the instance is created
    },

    methods: {
        test1: function () {
            this.result1 = this.$refs.input1.value + " 成功!";
        },

        test2: function () {
            this.result2 = this.input2 + " 成功!";
        }
    }
})

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^