v-model
是 Vue 中用来实现表单元素和数据属性之间双向绑定的指令。
工作原理:
v-model
是一个语法糖,它能够在表单元素和 Vue 实例的数据属性之间建立双向绑定关系。- 对于不同类型的表单元素(比如
<input>
、<textarea>
、<select>
等),v-model
会根据元素类型自动选择正确的方法来更新元素值。
用法:
- 在表单元素上使用
v-model
,将元素的值绑定到 Vue 实例的数据属性。 - 当表单元素的值发生变化时,Vue 实例中的数据属性也会随之更新,反之亦然。这样就实现了表单元素和数据属性之间的双向绑定。
示例:
<template>
<input v-model="message" placeholder="Enter message">
<p>{{ message }}</p>
</template>
<script>
export default {
data() {
return {
message: '' // Vue 实例中的数据属性
};
}
}
</script>
在这个示例中,v-model="message"
将 <input>
元素和 Vue 实例中的 message
数据属性建立了双向绑定关系。输入框中的值改变会更新 message
属性,而修改 message
属性的值也会同步到输入框中。
v-model
可以使表单元素和数据属性之间的交互变得简洁而直观,让开发者更便捷地实现双向数据绑定。
Was this helpful?
0 / 0