Skip to content

Latest commit

 

History

History
35 lines (24 loc) · 1.49 KB

20210925-v-model中的修饰符.md

File metadata and controls

35 lines (24 loc) · 1.49 KB

v-model中的修饰符

官方文档

.lazy

在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组织文字时)。你可以添加 lazy 修饰符,从而转为在 change 事件_之后_进行同步:

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" />
<iframe height="300" style="width: 100%;" scrolling="no" title="Handling forms: textarea" src="https://codepen.io/michael-cool/embed/WNOadrm?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen Handling forms: textarea by Michael (@michael-cool) on CodePen. </iframe> ## `.number`

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

<input v-model.number="age" type="number" />

这通常很有用,因为即使在 type="number" 时,HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析,则会返回原始的值。

.trim

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

<input v-model.trim="msg" />