Vue里的v-model基本用法是什么？v-model的修饰符有什么用？
发布时间：2022-01-09 22:00:03 所属栏目：语言 来源：互联网
导读：这篇文章给大家介绍的是关于Vue中的v-model的内容，下文有v-model的基本用法、v-model的修饰符等v-model相关的内容，感兴趣的朋友可以参考，那么接下来就跟随小编来学习一下吧。 Vue 框架早已经不是 MVVM（Mode-View-View-Model） 双向绑定了。早在 Vue 1.0
|
这篇文章给大家介绍的是关于Vue中的v-model的内容，下文有v-model的基本用法、v-model的修饰符等v-model相关的内容，感兴趣的朋友可以参考，那么接下来就跟随小编来学习一下吧。 Vue 框架早已经不是 MVVM（Mode-View-View-Model） 双向绑定了。早在 Vue 1.0 时代，Vue 在刚出世的时候的确是 MVVM 双向绑定。自 Vue 2.0 以来，Vue 就不再是双向绑定了，而是像 React 一样是单向绑定 MV（Model-View）了。但是，在 Vue 中仍保留了双向绑定的接口，v-model 就是。 1. 基本用法 <template> <div id="app"> <input v-model="x"> {{x}} </div> </template> <script> export default { data(){ return { x: 'init' } } } 在 JS 中修改 x 的值，input 输入框里也会随之改变。同样地，在页面中的 input 输入框内手动输入值，变量 x 的值也会随之改变。对象里的变量改变会影响视图的 input 的改变，视图中 input 的改变会影响对象里变量 x 值的改变。这就是双向绑定（Model-View-View-Model）。 2. v-model 实质上述使用 v-model 的代码等价于如下代码： <template> <div id="app"> <input :value="x" @input="x = $event.target.value"> {{x}} </div> </template> <script> export default { data(){ return { x: 'init' } } } </script> v-model 帮我们做的事就是，为 input 的 value 值设置一个动态绑定，然后在输入框的 input 事件触发后实时修改动态绑定的 value 的变量值。因此 v-model 实质是上述方式的语法糖。 $event 是原生 DOM 事件里的 event 事件对象。 3. v-model 的修饰符 所有修饰符都是起一个辅助的作用，其实可以在函数里自己判断条件实现。.lazyv-model 默认监听的是输入框的input 事件，原生 DOM 的input 事件就是记录实时的输入变化值。但是，我们有时不需要实时记录结果，只需要记录最终输入的结果值就可以了。 input 的原生 DOM 事件中还有一个change 事件，该事件是在输入框失去焦点时 或 按下回车键时 执行的。v-model 里以.lazy 修饰符的方式切换至该监听模式。 <template> <div id="app"> <input v-model.lazy="x"> {{x}} </div> </template>等价于：<template> <div id="app"> <input :value="x" @change="x = $event.target.value"> {{x}} </div> </template> .number.number修饰符是在输入内容改变后进行变量赋值时，自动使用 parseFloat() 函数将其变成数字。使用该修饰符时变量的初始值必须是数字。 <template> <div id="app"> <input v-model.number="x"> {{x}} </div> </template> <script> export default { data(){ return { x: 0 } } } </script> .trim .trim修饰符是将输入的内容改变后进行变量赋值时，自动忽略和去除前后的空格。更为精准地记录输入的字符串内容。 <template> <div id="app"> <input v-model.trim="x"> {{x}} </div> </template> <script> export default { data(){ return { x: 'init' } } } </script> 4. 自定义输入框的 v-modelv-model 的基本用法仅仅适用于原生的输入框元素 ，对于用户自己封装的输入框，可以用如下方式使用 v-model。当用在组件上时，v-model 的实质如下： <custom-input v-model="x"></custom-input> （编辑：拼字网 - 核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐