vue中.lazy 相当于change事件

Vue.js 中的 .lazy 修饰符用于 v-model,它将数据同步行为从实时更新改为在输入元素失去焦点或按下回车键时触发,实现类似 change 事件的效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue修饰符 .lazy 。在输入框中,v-model 默认是同步数据,使用 .lazy 会转变为在 change 事件中同步 ,
也就是在失去焦点 或者 按下回车键时才更新

<template>
    <div>
        <p>.lazy修饰符</p>
        <input type="text" v-model.lazy="val">
        <p>{{ val }}</p>
    </div>
</template>
<script>
    export default {
        data(){
            return{
              val:''
            }
        }
    }
</script>
Vue 2 中,`v-model` 是一种用于实现双向数据绑定的语法糖。它主要用于表单元素(如 `<input>`、`<textarea>` 和 `<select>`),也可以应用于自定义组件上。 ### 基本用法 - 表单控件 对于普通的 HTML 元素,`v-model` 可以帮助我们在视图层和模型之间同步数据: ```html <input v-model="message" placeholder="请输入文本"> <p>你输入的内容是: {{ message }}</p> ``` 在这个例子中,用户对 input 框内的任何更改都会实时更新到 Vue 实例中的 `message` 数据字段,并且页面上的段落也会随之改变。 #### 自定义事件修饰符 - `.lazy`:改为在 change 事件而非每次按键都触发更新。 - `.number`:自动将用户的输入转换为数值类型 (如果可能的话)。 - `.trim` :移除用户输入字符串两端的空白字符。 例如: ```html <!-- 当复选框切换状态时才发出更新 --> <input v-model.lazy="checked"> <!-- 输入数字并且会尝试将其转化为Number类型 --> <input v-model.number="age"> <!-- 删除首尾空格 --> <input v-model.trim="name"> ``` ### 组件间的 `v-model` 当涉及到父子组件交互时,`v-model` 同样可以简化过程。默认情况下,`v-model` 相当于同时设置了 `value` 属性及监听了 `input` 事件。 假设有一个简单的子组件叫做 MyInput.vue: ```js // MyInput.vue Vue.component('my-input', { props: ['value'], // 接收父组件传来的 value template: ` <input :value="value" @input="$emit('input', $event.target.value)" > ` }); ``` 那么就可以像这样使用: ```html <template> <!-- 我们可以直接利用 v-model --> <my-input v-model="searchText"></my-input> </template> <script> export default { data() { return { searchText: '' } } } </script> ``` 这里的关键点在于理解 `v-model` 在子组件内部是如何工作的——即通过设置名为“value”的 prop 并响应式地发射名为“input”的事件来回送新值给父级。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值