十九、v-model修饰符

(1).lazy:在默认情况下,v-model在每次input事件触发后将输入框的值数据进行同步(除了输入法组合文字时)。

                    你可以添加 lazy 修饰符,从而转为在change事件之后进行同步

<input type='text' v-model.lazy='message'>结果:{{message}}

(2).number:如果想自动将用户的输入值转为数值类型,可以给v-model添加 number 修饰符

<input type='number' v-model.number='age'>年龄:{{age}}

         注意:这通常很有用,因为即使在 type="number" 时,输入input元素的值也总会返回字符串类型

                   字符串类型是无法和加号直接做运算的,会把加号当成连接符使用。通常需要把字符串类型的数字用parseInt或parseFloat转换成数字类型

                   而 .number 修饰符自动转换成数字类型

(3).trim:如果要自动过滤用户输入的首尾空白字符,可以给v-model添加 trim 修饰符。  

姓名:<input type='text' v-model.trim='name'>
<button type='button' @click='submit()'>提交</button>

 

posted @ 2021-09-07 23:29  Strugglinggirl  阅读(281)  评论(0编辑  收藏  举报