美文网首页uni-appWEB前端程序开发让前端飞
Vue双向绑定两个常用的修饰符lazy和trim

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

作者: 前端组件分享 | 来源:发表于2023-06-16 00:29 被阅读0次

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

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

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

<input v-model.lazy="textField"/><p>文本输入框内容:{{textField}}</p>

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

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

<input v-model.trim="textField"/><p>文本输入框内容:{{textField}}</p>

相关文章

  • [Vue]基础指令

    v-model .lazy.lazy修饰符,焦点离开文本框发生变化 .trim去空格 .number Vue.di...

  • 2018-05-19 (表严肃)笔记一

    一、指令 指令 = 自定义属性 1. v-model 双向绑定 v-model.lazy/trim/number延...

  • [vue]修饰符

    trim用的多,平时用lazy & number较少,记录一下。 【其中.syns用于父子组件双向绑定】 .laz...

  • vue 修饰符

    v-model 修饰符 .lazy.number.trim .sync 修饰符 .native修饰符 事件修饰符 ...

  • Vue-day3

    Vue常用指令 修饰符 表单修饰符 v-model.lazy:change事件,失去焦点才改变.number ①限...

  • vue学习笔记7——v-model

    ** 双向数据绑定的几个修饰符** v-model.lazy 当焦点离开输入框时才进行渲染 v-mmodel.n...

  • (11)打鸡儿教你Vue.js

    表单 v-model 指令在表单控件元素上创建双向数据绑定 单选按钮: 修饰符.lazy转变为在 change 事...

  • Vue双向绑定

    Vue双向绑定 Obejct.defineProperty的setter/getter和发布订阅 Vue双向绑定原...

  • 2021-12-28

    v-model的修饰符 trim、number、lazy 1.v-model.trim:省略收集到的空格,只能前或...

  • 深入Vue响应式原理

    1.Vue的双向数据绑定 参考 vue的双向绑定原理及实现Vue双向绑定的实现原理Object.definepro...

网友评论

    本文标题:Vue双向绑定两个常用的修饰符lazy和trim

    本文链接:https://www.haomeiwen.com/subject/psfrydtx.html