前端应用开发实验：表单控件绑定

实验目的

（1）熟练掌握应用v-model指令实现双向数据绑定的方法，学会使用
v-model指令绑定文本框、复选框、单选按钮、下拉菜单；
（2）学会值绑定（将表单控件的值绑定到动态属性）和v-model 的修饰符

相关知识点

在 Vue.js 中，可以通过 v-model 指令对表单元素进行双向数据绑定。在
修改表单元素值的同时， Vue实例中对应的属性值也会随之更新；反之亦然。
（1）应用v-model指令绑定文本框、复选框、单选按钮、下拉菜单
应用v-model指令可以将单行文本框或多行文本框（文本域）的值与Vue实
例中的属性值进行双向数据绑定; 可以绑定单个复选框（绑定的是一个布尔值）
或多个复选框（绑定的是一个数组）;也可以绑定单选按钮，当某个单选按钮被
选中时，v-model指令绑定的属性值会被赋值为该单选按钮的value值；还可以
应用v-model指令绑定下拉菜单，对于单选情形，当选择某个选项时，v-model
指令绑定的属性值会被赋值为该选项的value值（如果未设置value值，则被赋
值为该选项中的文本），对于多选情形，应用v-model指令绑定的则是一个数组。
（2）使用v-bind指令实现表单控件的值绑定
在通常情况下，对于单选按钮、复选按钮、下拉菜单中的选项， v-model 指
令绑定的值是静态字符串（对于单个复选框，绑定的是布尔值）。但是，有时需
要将值绑定到 Vue 实例的一个动态属性上，而不是绑定到静态字符串，这时就
可以使用v-bind 指令来实现。
（3）v-model指令的修饰符
Vue.js 为 v-model 指令提供了一些修饰符,例如.lazy，.number，.trim，
可以用于处理某些常规操作。

实验内容

使用v-model指令实现表单控件的数据绑定，完成用户注册信息的填写和显示功能。要求：设计如图1所示的用户注册表单，使用v-model指令实现表单控件与Vue实例的相应属性的双向数据绑定，当用户填写信息（或选择）完毕并点击提交按钮，程序将用户填写的信息或选择的结果输出至控制台，或弹窗显示。
在这里插入图片描述

图1
参考基础代码如下：
在这里插入图片描述

请在此基础上，利用v-model指令及其他相关指令或Vue知识完成代码编写和调试。

代码实现

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>用户注册表单</title>
</head>
<body>
<div id="app">
  <form @submit.prevent="submitForm">
    <p>
      用户名：<input type="text" v-model="user.name">
    </p>
    <p>
      密码：<input type="password" v-model="user.password">
    </p>
    <p>
      性别：
      <label><input type="radio" value="男" v-model="user.gender"> 男</label>
      <label><input type="radio" value="女" v-model="user.gender"> 女</label>
    </p>
    <p>
      爱好：
      <label><input type="checkbox" value="html" v-model="user.hobbies"> html</label>
      <label><input type="checkbox" value="CSS" v-model="user.hobbies"> CSS</label>
      <label><input type="checkbox" value="Vue" v-model="user.hobbies"> Vue</label>
    </p>
    <p>
      所在地：
      <select v-model="user.country">
        <option value="中国">中国</option>
        <option value="美国">美国</option>
        <option value="其他">其他</option>
      </select>
    </p>
    <p>
      选择你擅长的技术：
      <select v-model="user.jishu" multiple>
        <option value="Java">Java</option>
        <option value="前端vue">前端vue</option>
        <option value="PHP">PHP</option>
      </select>
      <h3>您选择的技术：</h3>
      <ul>
        <li v-for="jishu in user.jishu">{
   
   { jishu }}</li>
      </ul>
    </p>
    
    <p>
      可选职位：
      <select v-model="selectedJob">
        <option v-for="job in jobs" :value="job">{
   
   { job }}</option>
      </select>
      <button type="button" @click="addJob">添加到已选职位</button>
    </p>
    <p>
      已选职位：
      <select v-model="selectedJob" size="5" style="width: 200px;">
        <option v-for="job in addedJobs" :value="job">{
   
   { job }}</option>
      </select>
      <button type="button" @click="removeJob">移除已选职位</button>
    </p>
    
    <p>
      <button type="submit">提交</button>
    </p>
  </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
new Vue({
  el: '#app',
  data: {
    user: {
      name: '',
      password: '',
      gender: '',
      hobbies: [],
      country: '',
      jishu: [],
    },
    jobs: ['Java程序员', '软件测试师', '前端工程师'],
    addedJobs: [],
    selectedJob: '',
  },
  methods: {
    addJob() {
      if (this.selectedJob && !this.addedJobs.includes(this.selectedJob)) {
        this.addedJobs.push(this.selectedJob);
      }
    },
    removeJob() {
      if (this.selectedJob) {
        const index = this.addedJobs.indexOf(this.selectedJob);
        if (index !== -1) {
          this.addedJobs.splice(index, 1);
        }
      }
    },
    submitForm() {
      console.log('提交的用户信息：', this.user);
      console.log('提交的职位：', this.addedJobs);
      alert('提交成功！');
    },
  },
});
</script>
</body>
</html>

这里不完全是实例代码，经过了很大程度的修改

效果

在这里插入图片描述