实验4：表单控件绑定（2学时）
（1）熟练掌握应用v-model指令实现双向数据绑定的方法，学会使用v-model指令绑定文本框、复选框、单选按钮、下拉菜单； （2）学会值绑定（将表单控件的值绑定到动态属性）和v-model 的修饰符。 | |
使用v-model指令实现表单控件的数据绑定，完成用户注册信息的填写和显示功能。要求：设计如图1所示的用户注册表单，使用v-model指令实现表单控件与Vue实例的相应属性的双向数据绑定，当用户填写信息（或选择）完毕并点击提交按钮，程序将用户填写的信息或选择的结果输出至控制台，或弹窗显示。  图1 参考基础代码如下： 请在此基础上，利用v-model指令及其他相关指令或Vue知识完成代码编写和调试。 | |
在 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，可以用于处理某些常规操作。 | |
  RegistrationForm.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>用户注册表单</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> </head> <body> <div id="app"> <form @submit.prevent="submitForm"> <label for="username">用户名:</label> <input type="text" id="username" v-model="user.username" required> <br><br> <label for="bio">个人简介:</label> <textarea id="bio" v-model="user.bio"></textarea> <br><br> <label>性别:</label> <input type="radio" id="male" value="男" v-model="user.gender"> <label for="male">男</label> <input type="radio" id="female" value="女" v-model="user.gender"> <label for="female">女</label> <br><br> <label>爱好:</label> <div v-for="(hobby, index) in hobbies" :key="index"> <input type="checkbox" :id="'hobby' + index" :value="hobby" v-model="user.hobbies"> <label :for="'hobby' + index">{{ hobby }}</label> </div> <br><br> <label for="location">所在地:</label> <select id="location" v-model="user.location"> <option v-for="location in locations" :value="location">{{ location }}</option> </select> <br><br> <label>选择你擅长的技术:</label> <select id="tech" v-model="user.tech" multiple> <option v-for="tech in techs" :value="tech">{{ tech }}</option> </select> <br><br> <label for="positions">可选职位:</label> <select id="positions" multiple v-model="user.positions"> <option v-for="position in positions" :value="position">{{ position }}</option> </select> <br><br> <button type="button" @click="addAllPositions">全选</button> <button type="button" @click="removeAllPositions">全不选</button> <button type="button" @click="invertPositions">反选</button> <br><br> <button type="submit">提交</button> <button type="reset" @click="resetForm">取消</button> </form> </div> <script> new Vue({ el: '#app', data: { user: { username: '', bio: '', gender: '', hobbies: [], location: '', tech: [], positions: [] }, hobbies: ['HTML', 'CSS', 'Vue'], locations: ['北京', '上海', '广州', '深圳'], techs: ['Java', '前端Vue', 'PHP'], positions: ['Java程序员', '软件测试师', '前端工程师'] }, methods: { submitForm() { console.log('注册信息:', this.user); alert('注册信息: ' + JSON.stringify(this.user)); }, addAllPositions() { this.user.positions = this.positions.slice(); }, removeAllPositions() { this.user.positions = []; }, invertPositions() { this.user.positions = this.positions.filter(p => !this.user.positions.includes(p)); }, resetForm() { this.user = { username: '', bio: '', gender: '', hobbies: [], location: '', tech: [], positions: [] }; } } }); </script> </body> </html> | |
HTML 结构： 添加了个人简介的文本区域。 添加了所在地的下拉菜单。 添加了选择你擅长的技术的多选下拉菜单。 添加了可选职位的多选下拉菜单，并提供了全选、全不选和反选的按钮。 Vue 实例： data 对象中添加了 bio、location、tech 和 positions 属性。 hobbies、locations、techs 和 positions 数组用于提供下拉菜单和复选框的选项。 methods 对象中添加了 addAllPositions、removeAllPositions、invertPositions 和 resetForm 方法，用于处理职位选择的逻辑。 事件处理： @click="addAllPositions"、@click="removeAllPositions" 和 @click="invertPositions" 用于处理全选、全不选和反选的按钮点击事件。 @click="resetForm" 用于重置表单。 展示在 Vue.js 中使用 v-model 指令进行双向数据绑定，并处理表单提交和职位选择的逻辑。 | |