Vue.js中的v-model
指令是Vue框架用于实现双向数据绑定的一种核心机制,特别是在表单元素中。它的主要作用是建立视图(View)与模型(Model)之间的同步更新关系。
在表单元素的应用中:
v-model
指令使得表单元素的值自动与Vue实例或组件的数据属性保持一致。当用户输入内容时,被绑定的数据属性会相应地更新;反之,如果数据属性发生变化(比如通过程序代码修改),则表单元素显示的内容也会随之更新。以下是
v-model
在不同类型的表单元素中的典型应用:文本输入框:
<input type="text" v-model="message">
,其中message
是Vue实例中的一个数据属性,每当输入框的内容改变时,message
的值也会同步变化。多行文本输入区:
<textarea v-model="description"></textarea>
,将多行文本框的值与description
属性绑定。单选按钮:
<input type="radio" v-model="selectedOption" value="option1"> Option 1
,多个具有相同v-model
的单选按钮组可以用来绑定同一个变量,当选中的按钮变化时,对应的值会被赋给selectedOption
。复选框:
<input type="checkbox" v-model="checked" /> Is Checked?
,复选框的状态(选中与否)会同步到布尔型变量checked
上。选择框(下拉列表):
<select v-model="selectedItem"><option>...</option></select>
,当选中的选项变化时,selectedItem
会保存当前选中的选项值。
对于自定义组件,v-model
可以通过在组件上指定model
选项或者使用v-model
修饰符来实现更复杂的双向绑定逻辑。自定义组件需要通过emit特定事件(通常是input
或change
)并携带新值,来配合父级组件的v-model
指令完成数据交互。