我们可以使用 Vue.js 中的 v-model 指令来完成表单数据的双向绑定。
1 基础用法
1.1 文本输入框（text）
这里演示了在文本输入框上输入的内容，会实时映射到绑定的数据上。
html：
<div id=\"app\">
<input type=\"text\" v-model=\"content\" placeholder=\"请输入\">
<p>输入框：{{content}}</p>
</div>
js：
< >
var app = new Vue({
el: \'#app\',
data: {
content: \'\'
}
});
</ >
效果：
![\"\"](\"/images/51jb/154390051315439lYj0L0513.gif\")
1.2 大文本输入框（textarea）
绑定方法与文本输入框相同。
html：
<div id=\"app2\">
<textarea v-model=\"content\" placeholder=\"请输入\"></textarea>
<p>内容：</p>
<p style=\"white-space: pre\">{{content}}</p>
</div>
js：
var app2 = new Vue({
el: \'#app2\',
data: {
content: \'\'
}
});
效果：
![\"\"](\"/images/51jb/15439005131i5E43910n0513.gif\")
这里对展示的内容所对应的 <p> 元素加了 white-space: pre 样式，这样内容即使带有回车符也会保留。
--------------------------------------------------------------------------------
注意：表单控件所显示的值只依赖于所绑定的数据，所以即便设置了表单控件中的 value值，也不会起作用哦。同理，<textarea>xxx</textarea>之间的值也无效。
之前的示例我们可以发现，使用中文输入法时，只有确定选中的词语，才会被如果 Vue.js 所更新。如果希望输入的内容实时更新，那么可以使用 @input。
html：
<div id=\"app3\">
<textarea @input=\"inputHandler\" placeholder=\"请输入\"></textarea>
<p>内容：</p>
<p style=\"white-space: pre\">{{content}}</p>
</div>
js：
var app3 = new Vue({
el: \'#app3\',
data: {
content: \'\'
},
methods: {
inputHandler: function (event) {
this.content = event.target.value;
}
}
});
可以看出，即使在 @input 定义的函数不带参数，Vue.js 也会在定义的函数（示例中的 inputHandler）中传入 event 原生事件对象。
效果：
![\"\"](\"/images/51jb/1543900514q154389004b514.gif\")
1.3 单选框
单选框一般都有多个条件可供选择，既然是单选框，自然希望实现互斥效果，我们可以使用 v-model 指令配合单选框的 value 来实现。
html：
<div id=\"app4\">
<input id=\"radio1\" type=\"radio\" v-model=\"checked\" value=\"文学\">
<label for=\"radio1\">文学</label>
<input id=\"radio2\" type=\"radio\" v-model=\"checked\" value=\"艺术\">
<label for=\"radio2\">艺术</label>
<input id=\"radio3\" type=\"radio\" v-model=\"checked\" value=\"经济\">
<label for=\"radio3\">经济</label>
<br>
<p>选择了：{{checked}}</p>
</div>
js：
var app4 = new Vue({
el: \'#app4\',
data: {
checked: \'文学\'
}
});
效果：
![\"\"](\"/images/51jb/154390051415i439T0k05J14.gif\")
1.4 复选框
复选框的绑定方式与单选框相同，只不过复选框所对应的数据类型是数组罢了。
html：
<div id=\"app5\">
<input id=\"checkbox1\" type=\"checkbox\" v-model=\"checked\" value=\"文学\">
<label for=\"checkbox1\">文学</label>
<input id=\"checkbox2\" type=\"checkbox\" v-model=\"checked\" value=\"艺术\">
<label for=\"checkbox2\">艺术</label>
<input id=\"checkbox3\" type=\"checkbox\" v-model=\"checked\" value=\"经济\">
<label for=\"checkbox3\">经济</label>
<br>
<p>选择了：{{checked}}</p>
</div>
js：
var app5= new Vue({
el: \'#app5\',
data: {
checked: [\'文学\',\'艺术\']
}
});
效果：
![\"\"](\"/images/51jb/15439005141R54x3900511t4.gif\")
1.5 下拉选择框
1.5.1 单选
html：
<div id=\"app6\">
<select v-model=\"selected\">
<option value=\"1\">文学</option>
<option value=\"2\">艺术</option>
<option>经济</option>
</select>
<br>
<p>选择了：{{selected}}</p>
</div>
js：
var app6 = new Vue({
el: \'#app6\',
data: {
selected: \'1\'
}
});
效果：
![\"\"](\"/images/51jb/15439005141564391e00v514.gif\")
可以看出，如果 <option> 含有 value 值，则会先匹配该值；如果没有，则匹配 <option> 中的 text 值（比如示例中的 <option>经济</option>）。
1.5.2 多选
为 <select> 标签添加 multiple 属性，即可实现多选。
html：
<div id=\"app7\">
<select v-model=\"selected\" multiple>
<option value=\"1\">文学</option>
<option value=\"2\">艺术</option>
<option>经济</option>
</select>
<br>
<p>选择了：{{selected}}</p>
</div>
![\"\"](\"/images/51jb/154390051414W5473900q514.gif\")
在实际应用场景，<select> 标签中的 <opinion> 一般是通过 v-for 指令动态输出的，其中每一项的 value 或 text 都可以使用 v-bind 动态输出的。
html：
<div id=\"app8\">
<select v-model=\"selected\">
<option v-for=\"option in options\"
:value=\"option.value\">{{option.text}}
</option>
</select>
<br>
<p>选择了：{{selected}}</p>
</div>
js：
var app8 = new Vue({
el: \'#app8\',
data: {
selected: \'1\',
options: [
{text: \'文学\', value: \'1\'},
{text: \'艺术\', value: \'2\'}
]
}
});
效果：
![\"\"](\"/images/51jb/15439005154aJ15439n00515.gif\")
--------------------------------------------------------------------------------
因为 select 标签的呈现样式依赖于浏览器，所以在实际业务场景中，我们更多的是使用 div 来模拟 select 标签的列表功能，而这可以通过使用 Vue.js 自定义组件的方式来实现一个通用的下拉选择组件。
以上示例 DEMO
2 绑定动态变量
之前所说的示例，v-model 绑定的都是静态变量。我们可以使用 v-bind 来绑定动态变量。
2.1 单选框
html：
<div id=\"app\">
<input id=\"radio1\" type=\"radio\" v-model=\"picked\" :value=\"value\">
<label for=\"radio1\">文学</label>
<input id=\"radio2\" type=\"radio\" v-model=\"picked\" :value=\"value2\">
<label for=\"radio2\">艺术</label>
<input id=\"radio3\" type=\"radio\" v-model=\"picked\" :value=\"value3\">
<label for=\"radio3\">经济</label>
<br>
<p>{{picked}}</p>
<p>{{value}},{{value2}},{{value3}}</p>
</div>
js：
var app = new Vue({
el: \'#app\',
data: {
picked: false,
value: \'文学\',
value2: \'艺术\',
value3: \'经济\',
}
});
效果：
![\"\"](\"/images/51jb/1543900515O1543Rj90051R5.gif\")
示例中定义的单选框默认值为 picked 所定义的 false。当选中某个单选框时，则动态绑定在 :value 中定义的变量。
2.2 复选框
html：
<div id=\"app2\">
<input id=\"checkbox\" type=\"checkbox\" v-model=\"checked\" :true-value=\"value1\" :false-value=\"value2\">
<label for=\"checkbox\">开关</label>
<p>checked：{{checked}}</p>
<p>value1：{{value1}}</p>
<p>value2：{{value2}}</p>
</div>
js：
var app2 = new Vue({
el: \'#app2\',
data: {
value1: \'亮\',
value2: \'暗\',
checked: \'\'
}
});
效果：
![\"\"](\"/images/51jb/154390051515439Q00G551J5.gif\")
复选框的默认值绑定的是 v-model 定义的变量，而勾选与取消勾选所绑定的值，则分别由 :true-value 与 false-value 来实现动态绑定。
2.3 下拉选择框
html：
<div id=\"app3\">
<select v-model=\"selected\">
<option :value=\"{number:1}\">文学</option>
<option :value=\"{number:2}\">艺术</option>
</select>
<br>
<p>选择了：{{selected.number}}</p>
</div>
js：
var app3 = new Vue({
el: \'#app3\',
data: {
selected: \'\'
}
});
效果：
![\"\"](\"/images/51jb/15439005151X543901i05j15.gif\")
当选中某个 option 时，app3.selected 为 ，所以 selected.number 即为 :value 定义的绑定值。
以上示例 DEMO
继续阅读与本文标签相同的文章
-
虚拟主机有什么优、缺点？
2026-05-19栏目： 教程
-
服务注册
2026-05-19栏目： 教程
-
服务器被攻击 如何查找漏洞以及攻击手法
2026-05-19栏目： 教程
-
Spring Cloud Zuul的动态路由怎样做？集成Nacos实现很简单
2026-05-19栏目： 教程
-
springboot自动配置原理
2026-05-19栏目： 教程