很久不写博客了。。。
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。