很久不写博客了。。。

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

v-model 会忽略所有表单元素的 valuecheckedselected 特性的初始值而总是将 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。

vue中的input使用e.target.value赋值的问题的更多相关文章

  1. vue中让input框自动聚焦

    created(){ this.changfouce(); }, methods: { //在vue生命周期的created()钩子函数进行的DOM操作要放在Vue.nextTick()的回调函数中, ...

  2. vue 中 限制 input 输入数字、小数位数等

    限制小数位数 <input type="number" @keydown="handleInput2" placeholder="请输入或查看& ...

  3. vue.js中,input和textarea上的v-model指令到底做了什么?

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...

  4. vue中input输入第一个字符时,光标会消失,需要再次点击才能输入

    vue中input输入第一个字符时,光标会消失,需要再次点击才能输入 在这里我犯了一个小错误,v-if语法比较倾向于一次性操作,当input获取焦点时,v-if判断为true,立即刷新数据,进行渲染, ...

  5. Vue中注意target和currentTarget的使用

    在vue中获取对象时注意event.currentTarget与event.target的区别. event.currentTarget指向事件所绑定的元素,而event.target始终指向事件发生 ...

  6. Vue中comoputed中的数据绑定

    Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...

  7. 理解Vue中的Render渲染函数

    理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...

  8. checkbox在vue中的用法小结

    关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插 ...

  9. 记一次Vue中v-model和v-bind区别

    由于v-model 只是语法糖, <input v-model="message"> 与下面的两行代码是一致的: <input v-bind:value=&quo ...

随机推荐

  1. ios学习8_KVC和字典转模型

    Key Value Coding是cocoa的一个标准组成部分,它能让我们能够通过name(key)的方式訪问属性,某些情况下极大地简化了代码.可称之为cocoa的大招. 例如以下的样例: 使用KVC ...

  2. Java学习笔记----容器

    一.Java Collections框架是什么? Java Collections 框架中包括了大量集合接口以及这些接口的实现类和操作它们的算法(如:排序.查找.反转.替换.复制.取最小元素.取最大元 ...

  3. web 页面传值乱码问题

    今天碰到一个问题,将A页面中文值传到B页面,session保存,然后在C页面显示,页面显示乱码 百度了一下什么原因,以为是session保存中乱码,于是将B页面的通过Server.UrlDecode( ...

  4. UVA 11488 Hyper Prefix Sets (Trie)

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  5. 千万数据条 用户特征数据 写入mysql

    from mysql_tool import * import copy s = ''' INSERT INTO `qqzone`.`myu` (`id`, `uid`, `age`, `gender ...

  6. [翻译]NUnit--Getting Started(二)

    Getting Started with NUnit 如果你打算开始学习,到下载页面选择一个NUnit版本.安装页面包含了安装说明. 开始NUnit阅读Quick Start页面.验证了一个C#银行应 ...

  7. hdoj--2186--悼念512汶川大地震遇难同胞——一定要记住我爱你(模拟水题)

     悼念512汶川大地震遇难同胞--一定要记住我爱你 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (J ...

  8. 洛谷 P1573 栈的操作

    题目描述 现在有四个栈,其中前三个为空,第四个栈从栈顶到栈底分别为1,2,3,-,n.每一个栈只支持一种操作:弹出并压入.它指的是把其中一个栈A的栈顶元素x弹出,并马上压入任意一个栈B中.但是这样的操 ...

  9. bzoj4443

    二分+二分图匹配 晚上脑子不太好使... 行列模型,填充数量性质,种种迹象告诉我们这是二分图,但是我觉得好像不太科学就弃了网络流... 二分第k大值,转化为求第n-k+1小值,二分求匹配判定即可. # ...

  10. 解决Error for wireless request "Set Mode" (8B06) 问题 (转载)

    转自:http://blog.csdn.net/muge0913/article/details/17062871 在运行以下命令的时候,意外的出错,最后google了下,最终才确定了原因,因为在运行 ...