Vue 3 常见表单控件事件处理

上篇文章我们学习了如何使用 v-model 绑定 input 输入框和 data 中的属性，这篇文章我们来看一下其它表单控件的绑定方法。

示例

这里示例大体的样式和结构我已经写好了，你可以从视频里附带的源代码示例里，直接编写代码。用户名这个我们上篇文章介绍了，这个就先不管它了。

单选按钮

我们先看一下单选框的数据绑定。假如我们让用户选择一下性别，男和女。我们在 HTML 模板中：

• 定义一个 type 为 radio 的 input，name 设置为 gender，这里的 name 相同的 radio 单选框才能形成一个单选按钮组，这样选择是互斥的。
• value 设置为 male，表示男性，这个是单选按钮选中之后，实际获取到的值。这里之所以用英文，是遵循了软件开发的一些最佳实践，方便后端程序或数据库，用枚举的形式存储数据，而枚举的属性名一般用英文。
• 在 input 后面，我们用一个 span 元素显示给用户看的值，这里写上『男』。
• 这里用 v-model 绑定一个名为 gender 的属性，这个我们稍后再在 data 里定义。

<label for="gender">性别：</label>
<div id="gender" class="radio-group">
  <input name="gender" type="radio" value="male" v-model="gender" /><span
    >男</span
  >
</div>

接着定义第二个单选按钮，同样使用 type 为 radio 的 input，name 设置和上一个单选按钮一样的，gender，然后值设置为 female 代表女性，v-model 绑定的属性名也是 gender，因为单选按钮只能选择一个，所以保存到同一属性中就好。

<label for="gender">性别：</label>
<div id="gender" class="radio-group">
  <input name="gender" type="radio" value="male" v-model="gender" /><span
    >男</span
  >
  <input name="gender" type="radio" value="female" v-model="gender" /><span
    >女</span
  >
</div>

接下来打开 index.js，在 data 属性里，我们定义一个 gender 属性，默认值为空白字符串：

data() {
	username: "",
  gender: "",
}

现在 gender 属性就绑定到性别单选按钮组里了，为了演示结果，我在 html 里模板里定义了一个 ul 无序列表简单的展示了一下属性值，这里显示了 username 输入框的值，我们再在下边添加一个 li，显示性别 gender 属性的值：

<div class="result">
  <ul>
    <li>性别：{{ gender }}</li>
  </ul>
</div>

好，现在我们运行一下示例，点击一下性别单选按钮，可以看到，选中的单选按钮的 value 属性值，设置到了 data 中的 gender 属性里。

复选框

我们再看一下复选框的数据绑定，它跟单选按钮基本上一样，只是它的结果是保存到一个数组中，因为可以多选。假设我们让用户选择兴趣爱好，分别是前端、后端和全栈。打开 index.js 文件，我们在 data() 函数返回的属性中，先添加一个 interests 属性，值为一个空白的数组：

data() {
    return {
      username: "",
      gender: "",
      interests: [],
    };
  },

接着编写模板，打开 index.html 文件：

• 这里我们定义三个 type 为 checkbox 的 input，【input:checkbox*3】。
• 给第一个 checkbox 的 name 属性设置为 interests。
• value 设置为 frontend，这个 value 会在复选框选中的时候，添加到数组中。
• v-model 设置为 interests，绑定到 data 中的 interests 属性。
• 后面用一个 span，设置展示给用户看的值：前端
• 给第二个 checkbox 的 name 也设置为 interests，形成一个复选框组。
• value 设置为 backend。
• v-model 同样设置为 interests。
• span 中的文本设置为后端。
• 第三个 checkbox Name 也设置为 interests。
• value 设置为 fullstack。
• v-model 绑定到 interests 属性中。
• span 中的文本设置为全栈。

<div id="interest" class="checkbox-group">
  <input
    type="checkbox"
    name="interests"
    value="frontend"
    v-model="interests"
  /><span>前端</span>
  <input
    type="checkbox"
    name="interests"
    value="backend"
    v-model="interests"
  /><span>后端</span>
  <input
    type="checkbox"
    name="interests"
    value="fullstack"
    v-model="interests"
  /><span>全栈</span>
</div>

好，现在我们设置好了 checkbox 的属性，都绑定到了 interests 属性中，我们在底下的结果里再新增一个 li 元素，显示 interests 数组的值：

<li>兴趣：{{ interests }}</li>

现在我们运行一下示例，在复选框控件里选择几个兴趣，可以看到，选中其中一个复选框的时候，它的 value 属性值就添加到了数组中，如果取消选择，那么值就会从数组中移除。

下拉菜单

接下来我们看看下拉菜单的数据绑定。假设我们让用户选择职业，分别是前端工程师、后端工程师和全栈工程师。打开 index.js，在 data 属性中新增一个 occupation 属性，默认值为空白字符串，这里我们的下拉菜单是单选的，所以不用数组：

data() { return { occupation: "", }; },

再打开 index.html，编写下拉组件的 html 代码，这里：

• 定义一个 select 控件，name 设置为 occupation，v-model 设置为 occupation，这里的 name 属性也可以省略，因为不需要形成一个组，也不用通过 name 属性访问它的值。
• 在 select 里面，定义 3 个 option 控件，option*3。
• 第一个 option 的 value 设置为 frontend，当选择这个选项的时候，occupation 属性值就变成了 frontend。 显示给用户看的文本设置为前端工程师
• 第二个 option 的 value 属性设置为 backend，显示给用户看的文本设置为后端工程师。
• 第三个 option 的 value 属性设置为 fullstack，文本设置为全栈工程师。

<select name="occupation" id="occupation" v-model="occupation">
  <option value="frontend">前端工程师</option>
  <option value="backend">后端工程师</option>
  <option value="fullstack">全栈工程师</option>
</select>

接着在显示结果的列表里，添加一个 li 元素，显示 occupation 属性的值：

<li>职业：{{ occupation }}</li>

好了，我们运行一下示例，在下拉菜单中选择一个职业，可以看到下边的结果中显示了对应 option 的 value，再切换一下，可以看到 occupation 的值也会发生变化。

文本域

对于多行的文本域，它的绑定方式和 input 文本输入框是一样的，这里我们简单看一下，假如我们要求用户编写一段自我介绍，我们先打开 index.js，在 data 里添加一个 intro 属性，值为空白字符串：

data() { return { intro: "", }; },

接着在 index.html 中，定义一个 textarea 控件，设置一下行数，row 为 10，然后通过 v-model 把值绑定到 intro 属性中：

<textarea id="intro" rows="10" v-model="intro"></textarea>

再在结果列表处，新增一个 li 元素，显示 intro 属性的值：

<li>自我介绍： {{ intro }}</li>

好了，我们运行一下示例，在自我介绍文本域里输入一段文字，可以看到下边的结果显示了输入的值。

小结

这个就是常用表单组件：单选按钮、复选框、下拉菜单和文本域的数据绑定方法。单选按钮绑定的值是单一的，复选框绑定的值是一个数组，下拉菜单和文本域绑定的值也是单一的，跟文本输入框的绑定方式基本一样。