Vue学习-v-model修饰符lazy number trim

Posted 2020-12-12 bqh10086

目录

• lazy修饰符
• number修饰符
• trim修饰符

lazy修饰符

• 默认情况下，v-model默认是在input事件中同步输入框的数据的
• lazy修饰符可以让数据在失去焦点或者回车时才会更新

<input type=‘text‘ v-model.lazy="message" />
<p>当前内容：{{message}}</p>

number修饰符

• 默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。

• 但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理

• number修饰符可以让在输入框中输入的内容自动转成数字类型

<input type=‘number‘ v-model.number="age" />
<p>年龄：{{age}} 类型：{{typeof age}}</p>

trim修饰符

• 如果输入的内容首尾有很多空格，通常我们希望将其去除
• trim修饰符可以过滤内容左右两边的空格

<input type=‘text‘ v-model.trim="message" />
<p>当前内容：-----{{message}}----</p>