vue修饰符 .lazy .number .trim
Posted xiaosongjiang
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue修饰符 .lazy .number .trim相关的知识,希望对你有一定的参考价值。
.lazy
在输入框中,v-model 默认是同步数据,使用 .lazy 会转变为在 change 事件中同步 , 也就是在失去焦点 或者 按下回车键时才更新
<template> <div> <p>.lazy修饰符</p> <input type="text" v-model.lazy="val"> <p>{{ val }}</p> </div> </template> <script> export default { data(){ return{ val:‘‘ } } } </script>
.number
如果想自动将用户的输入值转为数值类型,可以给 v-model
添加 number
修饰符,在实际的输入框中,输入一般都是string类型
<template> <div> <p>.number修饰符</p> <input type="number" v-model.number="val"> <p>数据类型:{{ typeof(val) }}</p> </div> </template> <script> export default { data(){ return{ val:‘‘ } } } </script>
.trim
修饰符会自动过滤掉输入的首尾空格
<template> <div> <p>.trim修饰符</p> <input type="etxt" v-model.trim="val"> <p>长度:{{ val.length }}</p> </div> </template> <script> export default { data(){ return{ val:‘‘ } } } </script>
以上是关于vue修饰符 .lazy .number .trim的主要内容,如果未能解决你的问题,请参考以下文章