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

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

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

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

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

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

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

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

 

你可能感兴趣的:(vue.js,javascript,前端,前端框架)