Vue——v-model的三种修饰符lazy、number、trim

v-model.lazy：值修改操作完成之后才会发生变化。
v-model.number：值修改时，保持其值为Number类型。
v-model.trim：剔除输入框内内容的空格，使其输入符合规则。

<body><div id="app"><!-- 1.修饰符：lazy --><input type="text" v-model='message'>只要改变就会同步<br><input type="text" v-model.lazy='message'>敲了回车（或失去焦点）才改变<h2>{{message}}</h2><hr><!-- 2.修饰符：number --><input type="number" v-model='age'>只要修改了，就变成了string类型<br><input type="number" v-model.number='age'> 依旧是number类型<h2>{{age}}--{{typeof age}}</h2><hr><!-- 3.修饰符：trim --><input type="text" v-model.trim='name'>在控制台打印 app.name 若有空格，则会显示<h2>您输入的名字：{{name}}</h2></div><script src="../JS/vue.js"></script><script>const app = new Vue({el:'#app',data:{message:'你好！',age : 0,name:'先打空格在写内容'}})</script>
</body>

执行结果如下：

Vue——v-model的三种修饰符lazy、number、trim相关推荐

vue修饰符 .lazy .number .trim
.lazy 在输入框中,v-model 默认是同步数据,使用 .lazy 会转变为在 change 事件中同步 , 也就是在失去焦点或者按下回车键时才更新 <template>< ...
修饰符.lazy .number .trim
1.lazy v-model 在每次 input 事件触发后将输入框的值与数据进行同步,也就是在失去焦点或者按下回车键时才更新 <template><div><p> ...
php三种修饰符,PHP中的权限修饰符 | 萧小寒
摘要对于很多JavaScript开发者来说,权限修饰符可能一点概述都没有(现阶段的版本中暂未出现).但是,做为JavaScript的超级TypeScript中便已弥补了这个缺陷.同样的,PHP语言本 ...
GLSL三种修饰符区别与用途(uniform,attribute和varying)
2019独角兽企业重金招聘Python工程师标准>>> 1.uniform变量 uniform变量是application传递给shader的变量,在application外部赋值, ...
vue的lazy修饰符和number修饰符、表单结构
目录 vue的lazy修饰符 vue的number修饰符表单的构成表单域表单控件 vue的lazy修饰符在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 ...
037——VUE中表单控件处理之表单修饰符：lazy/number/trim
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
[vue] 说说你对vue的表单修饰符.lazy的理解
[vue] 说说你对vue的表单修饰符.lazy的理解 input标签v-model用lazy修饰之后,vue并不会立即监听input Value的改变,会在input失去焦点之后,才会触发input ...
JAVA知识基础(三)：修饰符
JAVA中根据修饰对象的不同可以分为类修饰符.方法修饰符.变量修饰符三类,其中每种修饰符又可以单独分成两类:访问修饰符和非访问修饰符.为了便于理解,本文以访问和非访问的角度展开. 1.访问修饰符访问 ...
java四种修饰符_java中的四种修饰符
在编程过程中,经常会遇到四种修饰符来控制访问权限.之前对这个知识点没有研究过,一直是一知半解,每次遇到问题都模棱两可,不能给出一个确切的答案.近几天系统的看了看,也有了自己的一点心得体会. 正文: 先 ...

Vue——v-model的三种修饰符lazy、number、trim

Vue——v-model的三种修饰符lazy、number、trim

Vue——v-model的三种修饰符lazy、number、trim相关推荐

最新文章

热门文章