v-model 修饰符:.lazy .number .trim

本文详细介绍了Vue中v-model指令的三种修饰符:lazy、number和trim。通过实例展示了如何使用lazy修饰符实现输入框值的延迟同步,number修饰符自动转换输入值为数值类型,以及trim修饰符自动过滤用户输入的首尾空白字符。

#.lazy 延迟同步值

 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转变为使用 change事件进行同步:

<input v-model.lazy="text"  />

<div id="div">

<input v-model.lazy="text"  />

<p>这里显示数据属性 text 的值<br />
<span id="important">{{text}}</span>

<br/></p>
</div>

光标还未点击输入框以外其他区域,{{text}} 数据属性值还是初始值"demo".

鼠标点击输入框以外的区域,{{text}} 的值和输入框值同步

#.number 将输入值转为数值类型

如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符: 

<input v-model.number="age" type="number">

#.trim 过滤首尾空白字符

 自动过滤用户输入的首尾空白字符

<input v-model.trim="msg">

 

### v-bind修饰符示例 #### .prop `.prop` 修饰符用于将绑定的值作为 DOM 属性而不是特性来处理。在处理一些 DOM 属性时,如 `checked`、`selected` 等,使用 `.prop` 非常有用。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-bind.prop Example</title> </head> <body> <div id="app"> <input type="checkbox" v-bind:checked.prop="isChecked"> <span>{{ isChecked }}</span> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { isChecked: true } }); </script> </body> </html> ``` #### .camel `.camel` 修饰符用于将绑定的属性名从 kebab-case 转换为 camelCase。在处理一些 DOM 属性或自定义属性时,Vue 默认使用 kebab-case,但有些原生 DOM 属性需要 camelCase 格式。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-bind.camel Example</title> </head> <body> <div id="app"> <!-- 使用 .camel 修饰符将 view-box 转换为 viewBox --> <svg :view-box.camel="viewBox" width="200" height="200"> <rect x="10" y="10" width="100" height="100" fill="blue" /> </svg> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { viewBox: '0 0 200 200' } }); </script> </body> </html> ``` #### .sync `.sync` 修饰符(在 Vue 2 中)用于实现父子组件之间的双向数据绑定。在 Vue 3 中,`v-model` 成为了父子组件双向数据同步的首选方式。 ```html <!-- 父组件 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-bind.sync Example</title> </head> <body> <div id="app"> <child :title.sync="parentTitle"></child> <p>Parent Title: {{ parentTitle }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> Vue.component('child', { props: ['title'], template: ` <div> <input type="text" v-model="localTitle"> <p>Child Title: {{ localTitle }}</p> </div> `, data() { return { localTitle: this.title }; }, watch: { localTitle(newValue) { this.$emit('update:title', newValue); } } }); new Vue({ el: '#app', data: { parentTitle: 'Initial Title' } }); </script> </body> </html> ``` ### v-model修饰符示例 #### .lazy `.lazy` 修饰符会将 `v-model` 默认的 `input` 事件监听改为 `change` 事件监听,也就是在用户完成输入(如失去焦点或按下回车键)后才更新数据。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-model.lazy Example</title> </head> <body> <div id="app"> <input type="text" v-model.lazy="message"> <p>{{ message }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { message: '' } }); </script> </body> </html> ``` #### .number `.number` 修饰符会将用户输入的值自动转换为数字类型。如果输入的值无法转换为数字,则会返回原始的字符串。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-model.number Example</title> </head> <body> <div id="app"> <input type="number" v-model.number="age"> <p>Age: {{ typeof age }}, {{ age }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { age: 0 } }); </script> </body> </html> ``` #### .trim `.trim` 修饰符会自动去除用户输入内容的首尾空格。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-model.trim Example</title> </head> <body> <div id="app"> <input type="text" v-model.trim="username"> <p>Username: "{{ username }}"</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { username: '' } }); </script> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值