vuejs 中如何优雅的获取 Input 值

更新日期: 2019-03-10 阅读次数: 107620 分类: 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 中没有发现这个问题。

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊。 白天工地搬砖,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

相关文章

谈笑风生

assault

wack

学习了

爱评论不评论

近期节日

2019年12月12日 西安事变纪念日
2019年12月13日 南京大屠杀
2019年12月20日 澳门回归日
2019年12月21日 国际篮球日
2019年12月22日 冬至
2019年12月24日 平安夜
2019年12月25日 圣诞节
查看更多节日