Vue.js v-model 双向绑定特性

2024-01-28 06:35:39

Vue.js v-model 基础用法

Vue.js 的 v-model 指令用于实现表单数据的双向绑定，只需要在表单元素上添加 v-model 指令，就可以将表单元素的值与 Vue.js 组件的数据进行绑定。

<input type="text" v-model="name">

上述代码中，v-model 指令将 <input> 元素的值与 Vue.js 组件的 name 数据进行绑定，这意味着当用户在 <input> 元素中输入值时，name 数据的值也会随之更新。反之，当 name 数据的值发生变化时，<input> 元素中的值也会随之更新。

Vue.js v-model 高级用法

除了基本用法之外，v-model 指令还支持一些高级用法，可以满足更复杂的表单需求。

1. 修饰符

v-model 指令支持一些修饰符，可以改变 v-model 的行为。

.lazy：只在用户离开表单元素时更新数据。
.number：将输入值转换为数字。
.trim：在更新数据之前修剪输入值。

例如，以下代码使用 .lazy 修饰符，只在用户离开 <input> 元素时更新 name 数据：

<input type="text" v-model.lazy="name">

2. 自定义组件

v-model 指令也可以用于自定义组件，只需在组件中定义一个 value 属性，并将 v-model 指令绑定到 value 属性即可。

<my-component v-model="name"></my-component>

Vue.component('my-component', {
  props: ['value'],
  template: '<input type="text" :value="value" @input="$emit('input', $event.target.value)">',
});

Vue.js v-model 常见陷阱和注意事项

在使用 v-model 指令时，需要注意一些常见的陷阱和注意事项。

不要在 <select> 元素上使用 v-model 指令 。在 <select> 元素上使用 v-model 指令可能会导致一些意想不到的问题。建议使用 v-bind 指令和 @change 事件来实现 <select> 元素的双向绑定。
不要在 <input type="file"> 元素上使用 v-model 指令 。在 <input type="file"> 元素上使用 v-model 指令可能会导致一些安全问题。建议使用 ref 属性来获取 <input type="file"> 元素，然后使用 $refs 属性来访问该元素并获取文件。
不要在 <textarea> 元素上使用 v-model.lazy 修饰符 。在 <textarea> 元素上使用 v-model.lazy 修饰符可能会导致一些性能问题。建议使用 v-model 指令而不使用 v-model.lazy 修饰符。