vuejs 中如何优雅的获取 Input 值

更新日期: 2019-03-10 阅读次数: 116126 分类: VueJS

原生 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 太明显了。示例代码:

测试
{{ result1 }}
测试
{{ result2 }}

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 中没有发现这个问题。

谈笑风生

assault

wack

学习了

爱评论不评论

近期节日

2020年07月22日 大暑
2020年07月30日 非洲妇女日
2020年08月01日 八一建军节
2020年08月06日 国际电影节
2020年08月07日 立秋
2020年08月15日 日本投降日
2020年08月22日 处暑
2020年08月25日 七夕
2020年09月02日 中元节
2020年09月03日 抗日胜利纪念日
2020年09月07日 白露
2020年09月08日 国际扫盲日
查看更多节日