用户注册表单 - 完善功能，支持查看已选职位 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>用户注册表单</title>
	<meta charset="utf-8">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
	<h1>用户注册表单</h1>
<pre><code>&lt;label for=&quot;username&quot;&gt;用户名：&lt;/label&gt;
&lt;input type=&quot;text&quot; id=&quot;username&quot; v-model=&quot;form.username&quot;&gt;&lt;br&gt;&lt;br&gt;

&lt;label for=&quot;intro&quot;&gt;个人简介：&lt;/label&gt;
&lt;textarea id=&quot;intro&quot; v-model=&quot;form.intro&quot;&gt;&lt;/textarea&gt;&lt;br&gt;&lt;br&gt;

&lt;label&gt;性别：&lt;/label&gt;
&lt;input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;男&quot; v-model=&quot;form.sex&quot;&gt;男
&lt;input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;女&quot; v-model=&quot;form.sex&quot;&gt;女&lt;br&gt;&lt;br&gt;

&lt;label&gt;爱好：&lt;/label&gt;
&lt;input type=&quot;checkbox&quot; name=&quot;hobby&quot; value=&quot;HTML&quot; v-model=&quot;form.hobby&quot;&gt;HTML
&lt;input type=&quot;checkbox&quot; name=&quot;hobby&quot; value=&quot;CSS&quot; v-model=&quot;form.hobby&quot;&gt;CSS
&lt;input type=&quot;checkbox&quot; name=&quot;hobby&quot; value=&quot;Vue&quot; v-model=&quot;form.hobby&quot;&gt;Vue[HTML]&lt;br&gt;&lt;br&gt;

&lt;label&gt;对爱好进行快捷操作：&lt;/label&gt;
&lt;button @click=&quot;selectAll()&quot;&gt;全选&lt;/button&gt;
&lt;button @click=&quot;unselectAll()&quot;&gt;全不选&lt;/button&gt;
&lt;button @click=&quot;reverseSelect()&quot;&gt;反选&lt;/button&gt;&lt;br&gt;&lt;br&gt;

&lt;label for=&quot;location&quot;&gt;所在地：&lt;/label&gt;
&lt;select id=&quot;location&quot; v-model=&quot;form.location&quot;&gt;
	&lt;option value=&quot;&quot;&gt;请选择&lt;/option&gt;
	&lt;option value=&quot;北京&quot;&gt;北京&lt;/option&gt;
	&lt;option value=&quot;上海&quot;&gt;上海&lt;/option&gt;
	&lt;option value=&quot;广州&quot;&gt;广州&lt;/option&gt;
	&lt;option value=&quot;深圳&quot;&gt;深圳&lt;/option&gt;
&lt;/select&gt;&lt;br&gt;&lt;br&gt;

&lt;label&gt;选择你擅长的技术：&lt;/label&gt;
&lt;select v-model=&quot;form.technology&quot;&gt;
	&lt;option value=&quot;&quot;&gt;请选择&lt;/option&gt;
	&lt;option value=&quot;Java&quot;&gt;Java&lt;/option&gt;
	&lt;option value=&quot;前端Vue&quot;&gt;前端Vue&lt;/option&gt;
	&lt;option value=&quot;PHP&quot;&gt;PHP&lt;/option&gt;
&lt;/select&gt;&lt;br&gt;&lt;br&gt;

&lt;label&gt;可选职位：&lt;/label&gt;
&lt;select v-model=&quot;form.position&quot; multiple&gt;
	&lt;option value=&quot;Java程序员&quot;&gt;Java程序员&lt;/option&gt;
	&lt;option value=&quot;软件工程师&quot;&gt;软件工程师&lt;/option&gt;
	&lt;option value=&quot;前端工程师&quot;&gt;前端工程师&lt;/option&gt;
&lt;/select&gt;&lt;br&gt;&lt;br&gt;

&lt;button @click=&quot;addSelectedPosition()&quot;&gt;已选职位&lt;/button&gt;&lt;br&gt;&lt;br&gt;

&lt;!-- 新增已选职位展示 --&gt;
&lt;div v-if=&quot;form.selectedPosition.length &gt; 0&quot;&gt;
	已选职位：
	&lt;ul&gt;
		&lt;li v-for=&quot;position in form.selectedPosition&quot;&gt;{{ position }}&lt;/li&gt;
	&lt;/ul&gt;
&lt;/div&gt;

&lt;button @click=&quot;submitForm()&quot;&gt;提交&lt;/button&gt;
&lt;button @click=&quot;resetForm()&quot;&gt;取消&lt;/button&gt;
</code></pre>
</div>
<script>
	var app = new Vue({
		el: '#app',
		data: {
			form: {
				username: '',
				intro: '',
				sex: '',
				hobby: [],
				location: '',
				technology: '',
				position: [],
				selectedPosition: [] // 新增已选职位
			}
		},
		methods: {
			selectAll: function() {
				this.form.hobby = ['HTML', 'CSS', 'Vue[HTML]'];
			},
			unselectAll: function() {
				this.form.hobby = [];
			},
			reverseSelect: function() {
				var selectedHobbies = this.form.hobby;
				if(selectedHobbies.length == 3) {
					this.form.hobby = [];
				} else {
					this.form.hobby = ['HTML', 'CSS', 'Vue[HTML]'].filter(function(value) {
						return !selectedHobbies.includes(value);
					});
				}
			},
			submitForm: function() {
				alert(JSON.stringify(this.form, null, 2));
			},
			resetForm: function() {
				this.form.username = '';
				this.form.intro = '';
				this.form.sex = '';
				this.form.hobby = [];
				this.form.location = '';
				this.form.technology = '';
				this.form.position = [];
				this.form.selectedPosition = []; // 重置已选职位
			},
			addSelectedPosition: function() {
				this.form.selectedPosition = this.form.position;
			}
		}
	})
</script>
</body>
</html>