vue中的input使用e.target.value赋值的问题

梦里梦外; 2022-01-09 13:05 616阅读 0赞

很久不写博客了。。。

vue中对表单的处理，相对原生js，增加了一个双向绑定的语法糖：v-model。官方文档里有一段：

`v-model` 会忽略所有表单元素的 `value`、`checked`、`selected` 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 `data` 选项中声明初始值。

这段话很重要。我们知道，input有各种原生事件（oninput,onchange等），而原生事件里可以用e.target.value对输入框进行赋值。这时候就有个问题了，对e.target.value渎职和v-model绑定的数据直接修改有什么冲突吗？

答案是有的，有可能造成数据不统一的情况：页面上显示的值与绑定的值不一致。

如果要进行校验等操作，可以修改v-model绑定的值，而不是修改e.target.value。

<template>
        <div class="hello">
            <input @input="onInput" @change="onChange"  @keydown="onKeyDown" v-model="value" />
            <input type="button" value="点我" @click="onClick">
        </div>
    </template>
    
    <script>
        export default {
            name: 'HelloWorld',
            data() {
                return {
                    value:1
                }
            },
            methods:{
                onInput(e){
                    console.log('onInput');
                    // e.target.value = 5;
                    // this.value = 5;
                },
                onChange(e) {
                    // console.log('onChange');
                    // e.target.value = 7;
                    // console.log(this.value);
                },
                onKeyDown(e){
                    console.log('onKeyDown');
                    e.target.value = 6;
                },
                onClick(e){
                    // this.value = this.value+1;
                    console.log(this.value);
                    console.log();
                }
            }
        }
    </script>

上面这个例子里就会出现数据不统一的情况。页面显示6，而获取this.value真实值是64。

![821939-20190527144513012-1064491432.png][]

转载于:https://www.cnblogs.com/xiaochongchong/p/10930660.html

[821939-20190527144513012-1064491432.png]: /images/20220109/dd8ed145207346aabaee2f8551af2e61.png