当前位置：首页 > news >正文

[Vue2]v-model用于表单

news 来源：原创 2025/7/12 23:48:50

之前我们讲到过v-model用于双向绑定一个数据，通常用于表单提交数据。而之前的演示里只演示了文本输入栏，这里详细演示一下其他表单输入时使用v-model。

文本输入

文本输入数据就是经典的type="text"：

<input type="text">

直接使用v-model绑定一个数据：

<input type="text" v-model="MyText"><script>const app = new Vue({el: '#app',data: {MyText:""}})</script>

绑定之后，在输入框中输入的数据会及时同步给变量MyText。而后台的页面资源中的变量MyText如果变动，也会立刻同步给输入框里的文本。

在这种输入条件下，v-model传递的数据是一个String类型（当然输入格式正确可以被转换为其他，如123可以转化为数值类型，不过需要额外进行设置）

复选框输入

复选框是type="checkbox"的输入格式。

与文本输入不同，复选框绑定一个数据之后，页面和变量之间传递的数据是布尔值，也就是true或者false。

使用方法倒是与文本输入大差不差：

<input type="check" v-model="isSingle"><script>const app = new Vue({el: '#app',data: {isSingle:false}})</script>

单选框输入

这里先讲一下单选框的一些相关知识：

单选框的type的值为radio，也就是type="radio"。想要用单选框还得给单选框的每个选项元素分组并分到同一个组里，分组使用属性name：

<input type="radio" name="zubie1">北京
<input type="radio" name="zubie1">上海

分组之后，同一个组里的单选框选项彼此之间会排斥，当其中一个被勾选时，其他选项不会被勾选。

然后我们还想要使用value属性，用于传递数据。欸，有人要问了，这上面不是写了北京和伤害吗？为什么还要用value？

上面的写的北京和上海是展示给用户看的，实际上这个选项框没有绑定数据。想要给该选项框给予一个数据，用于在其被选中时传递给后台，就要使用value给该选项框赋值。然后再使用v-model，绑定后端一个变量，这个变量的取值必须是单选框组里的值的其中一个，这样前端页面才能够响应到对应的单选框上：

<input type="radio" name="zubie1" value="beijin" v-model="area">北京
<input type="radio" name="zubie1" value="shanghai" v-model="area">上海<script>const app = new Vue({el: '#app',data: {area:"beijin"}})</script>

下拉选项框输入

下拉选项框与单选框的使用相似。简单介绍一下下拉选项框，下拉选项框使用<select>标签定义，在其中使用子标签<option>来定义下拉菜单中的可选值。同样的，在<option>的文本中的内容只是展示给用户看的，我们需要使用value属性给每个下拉选项赋值。赋了值之后，与单选框不同，我们v-model是写在<select>中，不用写在子标签<option中>：

<select v-model="area"><option value="beijin">北京</option><option value="shanghai">上海</option><option value="shenzhen">深圳</option>
</select><script>const app = new Vue({el: '#app',data: {area:"beijin"}})</script>

文本输入

复选框输入

单选框输入

下拉选项框输入

相关文章：