使用vue优雅地获取input值

该文章由 leevare 发布于 ,归类于 Javascript

双向绑定 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
        }
    }
});

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒