Vue双向绑定两个常用的修饰符lazy和trim

双向绑定是Vue中处理用户交互的一种方式，文本输入框、多行文本输入区域、单选框与多选框等都可以进行数据的双向绑定。

在对表单进行数据绑定时，我们可以使用修饰符来控制绑定指令的一些行为。比较常用的修饰符有lazy和trim。

lazy修饰符的作用有些类似于属性的懒加载。当我们使用v-model指令对文本输入框进行绑定时，每当输入框中的文本发生变化，其都会同步修改对应的属性的值。在某些业务场景下，我们并不需要实时关注输入框中文案的变化，只需要当用户输入完成后再进行数据逻辑的处理，这时就可以使用lazy修饰符，示例如下：



文本输入框内容:{{textField}}

运行上面的代码，只有当用户完成输入，即输入框失去焦点后，段落中才会同步到输入框中最终的文本数据。

trim修饰符的作用是将绑定的文本数据的首尾空格去掉，在很多应用场景中，用户输入的文案都是要提交到服务端进行处理的，trim修饰符处理首尾空格的特性可以为开发者提供很大的方便，示例代码如下：



文本输入框内容:{{textField}}