目录
- 实验目的
- 相关知识点
- 实验内容
- 代码实现
- 效果
实验目的
（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/vue@2.6.14/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>
这里不完全是实例代码，经过了很大程度的修改
效果
