v-model获取值与.value取值的区别（v-model原理分析）

vue中使用v-model在表单元素上创建双向数据绑定，在官方文档中简单的提到了它的本质只是一个语法糖，在单向数据绑定的基础上，增加了监听用户输入事件并更新数据的功能；
对，它本质上只是一个语法糖，但到底是一个什么样的语法糖呢……？

简单点说，如果有这样一段模板：

    <input v-model="name" type="text"/>

那么 v-model 的行为，就比较类似：

    <input :value="name" @input="name = $event.target.value" type="text"/>

前段时间刚好要做一个类似百度搜索的输入框输入后实时搜索的功能，发现使用输入法 (如中文、日文、韩文等) 的时候，v-model不会在输入法组合文字过程中得到更新，打开官方文档查找后发现文档中已经提到了这种情况。官方推荐直接使用input事件来处理。可以向下面这样写：

    <input :value="name" @getData="limit($event.target.value)" type="text"/>

没想到前几天再次踩坑。

<input v-model="loginForm.phoneNumber" @input="limit" type="text">

limit(e) {e.target.value = e.target.value.replace(/[^\d]/g,'')console.log('value值-----'+e.target.value)console.log('model值-----'+this.loginForm.phoneNumber)}

使用了一个函数限制输入框只能输入数字，输入其他将会被置空，在输入1时是正确的，之后我们输入一个非数字，这个非数字并被置空之后，再输入新的数字，出现了下面这样的情况：

v-model的值和value的值出现了不同，v-model无法获取到新输入的数值。

为什么会这样呢？百度半天无果，只好研究一波vue源码。如下便是vue中实现v-model绑定的方法，可以发现，在方法中有一句判断：code = `if($event.target.composing)return;${code}` ，这是什么意思呢？即当input事件是由IME （即由输入法触发）构成触发的，会直接return，不再获取值。

function genDefaultModel (el: ASTElement,value: string,modifiers: ?ASTModifiers
): ?boolean {const type = el.attrsMap.typeconst { lazy, number, trim } = modifiers || {}const needCompositionGuard = !lazy && type !== 'range'const event = lazy? 'change': type === 'range'? RANGE_TOKEN: 'input'let valueExpression = '$event.target.value'if (trim) {valueExpression = `$event.target.value.trim()`}if (number) {valueExpression = `_n(${valueExpression})`}let code = genAssignmentCode(value, valueExpression)if (needCompositionGuard) {code = `if($event.target.composing)return;${code}`}addProp(el, 'value', `(${value})`)addHandler(el, event, code, null, true)if (trim || number || type === 'number') {addHandler(el, 'blur', '$forceUpdate()')}
}

再看代码的其他部分，并没有发现什么还可能出现问题的地方，所以直接来测试一波是否当我们输入汉字后再输入数字时，composing的判断出现了问题，导致了v-model无法获取值。

limit(e) {e.target.value = e.target.value.replace(/[^\d]/g,'')console.log('是否由输入法触发-----'+e.target.composing);console.log('value值-----'+e.target.value)console.log('model值-----'+this.loginForm.phoneNumber)}

果然，composing再继续输入数字时，每次判断仍然为true，导致v-model无法获取到值。

v-model获取值与.value取值的区别（v-model原理分析）相关推荐

jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中
例:将多个选中的checkbox的值组装成一个字符串 <script type=text/javascript> function addMem(){ //var followers = ...
jquery radio取值，checkbox取值，select取值，radio选中，
jquery radio取值,checkbox取值,select取值,radio选中, var item = $('input[@name=items][@checked]').val(); 获取se ...
sql-case when 条件1 then 取值1 when 条件2 then 取值2 else 取值3 end
遇到 XXX情况就 XXX 遇不到就 XXX 结束 case when -- then -- else -- end 例如一个3条件取值的字段: case when 条件1 then 取值1 whe ...
matlab 数组抽值,matlab-数组取值
一起来学matlab-数组取值觉得有用的话,欢迎一起讨论相互学习~Follow Me MATLAB中的字符串符号 :冒号 s1=['I am sad';'you are ';'interest'] ...
thymeleaf 获取yml中的值_Thymeleaf前后端传值页面取值与js取值
目的: 后端通过Model传值到前端页面通过Model取值显示 js通过Model取值作为变量使用 1.后台Controller @GetMapping("/message") ...
python 取json数组的值_pythonjson数组取值
Python 怎么获取json 里的特定的某个值如果孤独的人愿意回头,焦躁的人愿意等候,内向的人愿意开口,也许这才是爱情最真的样子." 首先我们要导入json包,新建一个对象. 真正的爱情并 ...
php兴趣爱好复选框如何取值,php checkbox 取值详细说明
php checkbox 取值详细说明发布于 2014-12-12 18:18:58 | 176 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hypertext ...
Thymeleaf前后端传值页面取值与js取值
目的: 后端通过Model传值到前端页面通过Model取值显示 js通过Model取值作为变量使用 1.后台Controller @GetMapping("/messag ...
java map随机取值_HashMap随机取值和迭代器取值的对比
一共四中方法,前两种是迭代器取值,后两种是随机取值,循环了5000万次,时间分别为:迭代器读取的速度大约是随机读取的速度的1.5倍,数据量越大,差距越明显. 另外,插入是读取的100倍左右的时间(这个 ...

v-model获取值与.value取值的区别（v-model原理分析）

v-model获取值与.value取值的区别（v-model原理分析）相关推荐

最新文章

热门文章