使用vue优雅地获取input值

双向绑定 v-model

有两种情况

• input默认为空。这种情况使用v-model最方便，通过this.inputName即可获取到对应的值。

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

使用ref

在不适合使用v-model的时候，可以使用ref来达到目的。

测试
{{result1}}

测试
{{result2}}

HTML代码

<div id="demo">
    <input type="text" value="测试Vue" ref="input1">
    <a href="#" @click.prevent="test1">测试</a>
    <p>{{result1}}</p>

    <br>

    <input type="text" v-model="input2">
    <a href="#" @click.prevent="test2">测试</a>
    <p>{{result2}}</p>
</div>

JS代码

new Vue({
    el: '#demo',
    data: {
        result1: null,
        result2: null,
        input2: ""
    },
    methods: {
        test1: function() {
            this.result1 = this.$refs.input1.value
        },
        test2: function() {
            this.result2 = this.input2
        }
    }
});