vue中的input使用e.target.value赋值的问题
很久不写博客了。。。
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。
vue中的input使用e.target.value赋值的问题的更多相关文章
- vue中让input框自动聚焦
created(){ this.changfouce(); }, methods: { //在vue生命周期的created()钩子函数进行的DOM操作要放在Vue.nextTick()的回调函数中, ...
- vue 中 限制 input 输入数字、小数位数等
限制小数位数 <input type="number" @keydown="handleInput2" placeholder="请输入或查看& ...
- vue.js中,input和textarea上的v-model指令到底做了什么?
v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...
- vue中input输入第一个字符时,光标会消失,需要再次点击才能输入
vue中input输入第一个字符时,光标会消失,需要再次点击才能输入 在这里我犯了一个小错误,v-if语法比较倾向于一次性操作,当input获取焦点时,v-if判断为true,立即刷新数据,进行渲染, ...
- Vue中注意target和currentTarget的使用
在vue中获取对象时注意event.currentTarget与event.target的区别. event.currentTarget指向事件所绑定的元素,而event.target始终指向事件发生 ...
- Vue中comoputed中的数据绑定
Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...
- 理解Vue中的Render渲染函数
理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...
- checkbox在vue中的用法小结
关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插 ...
- 记一次Vue中v-model和v-bind区别
由于v-model 只是语法糖, <input v-model="message"> 与下面的两行代码是一致的: <input v-bind:value=&quo ...
随机推荐
- CentOS+Apache+php无法访问redis的解决方法 Redis server went away
在CentOS下配置Apache+php+redis+phpredis环境.编辑访问redis缓存的php程序test.php,以应用程序方式在后台运行,可成功访问Redis,而在Apache下以网页 ...
- BZOJ1202 [HNOI2005]狡猾的商人 并查集维护前缀和
1202: [HNOI2005]狡猾的商人 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1935 Solved: 936[Submit][Stat ...
- Delphi属性比对象的域有更强的功能
8.4 Delphi自定义组件(3) http://tech.163.com 2006-04-29 11:49:34 来源: 清华大学出版社 网友评论0 条 论坛 3. 测试未安装的组件 在将新组 ...
- 第二次PHP面试题
昨天下午翘班去参加了人生中第二次PHP面试.是一家相对第一家更加专业的互联网公司.效果不如第一家理想,笔试题有点难,而且偏高理论,面试时面试官也还不错,一起探讨,可是他的问题我还是很多都不知道,果然是 ...
- iOS_20_微博自己定义可动画切换的导航控制器
终于效果: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcHJlX2VtaW5lbnQ=/font/5a6L5L2T/fontsize/400/fill/ ...
- go09---defer
package main /* defer 类似其它语言中的析构函数,在函数体执行结束后 按照调用顺序的相反顺序逐个执行,先进后出, 即使函数发生严重错误也会执行,资源清理文件关闭, 支持匿名函数的调 ...
- Tensorflow学习笔记——占位符和feed_dict(二)
创建了各种形式的常量和变量后,但TensorFlow 同样还支持占位符.占位符并没有初始值,它只会分配必要的内存.在会话中,占位符可以使用 feed_dict 馈送数据. feed_dict是一个字典 ...
- 对于系统盘升级windows10怕空间不够,还是打算继续卸载一些软件
本来是打算从其他盘压缩,然后扩展,可是怕把磁盘给弄坏了,然后就保存原来的,就是看升级的推送什么时候来了.
- 【NOI 2007】 社交网络
[题目链接] 点击打开链接 [算法] 首先,跑floyd,计算最短路和最短路径数 然后,计算答案,枚举k,s,t,若dist[s][k] + dist[k][t] = dist[s][t], 那么,点 ...
- 使用HttpClient MultipartEntityBuilder 上传文件,并解决中文文件名乱码问题
遇到一种业务场景,前端上传的文件需要经过java服务转发至文件服务.期间遇到了原生HttpClient怎么使用的问题.怎么把MultipartFile怎么重新组装成Http请求发送出去的问题.文件中文 ...