V-model双向绑定练习

2021年4月24日

			body{margin:0;}
			#app{
				width: 713px;
				margin: 0 auto;
				background-color: #dddddd;
				padding: 10px;
			}
			header{padding: 20px;}
			h2{
				margin:0;
				text-align: center;
			}

			article>div{margin-bottom: 18px;}
			article>div>label:nth-child(1){
				display: inline-block;
				width: 210px;
				text-align: right;
			}
			footer>table{border-collapse: collapse;}
			td{
				padding: 18px;
				width: 320px;
			}

	<div id="app">
		<header><h2>学生生活问卷</h2></header>
		<article>
			<div>
				<label>所在院校/专业/班级：</label><input type="text" v-model.lazy="schoolInformation" style="width: 382px; height: 22px">
			</div>
			<div>
				<label class="label2">性别：</label>
				<input type="radio" v-model="sex" value="男" id="sex1"><label for="sex1">男</label>
				<input type="radio" v-model="sex" value="女" id="sex2"><label for="sex2">女</label>
			</div>
			<div>
				<label>在校期间主要支出：</label>
				<label v-for="item in SpendingType" :for="item">
					<input type="checkbox" :value="item" :id="item" v-model="SpendingTypeSelect">{{item}}
				</label>
			</div>
			<div>
				<label>是否逃过课：</label>
				<input type="checkbox" v-model="skipClasses" id="skipClasses"><label for="skipClasses">逃课</label>
			</div>
			<div>
				<label>每天学习多长时间（课余）：</label>
				<select v-model="learningTimeSelect">
					<option v-for="item in learningTime" :value="item" >{{item}}</option>
				</select>
			</div>
			<div>
				<label>你认为哪些方面最重要：</label>
				<select v-model="importanceSelect" multiple>
					<option :value="item" v-for="item in importance" >{{item}}</option>
				</select>
			</div>
			<div>
				<label>您对学院的建议：</label>
				<textarea cols="50" rows="3" v-model.lazy="advise"></textarea>
			</div>
		</article>
		<footer>
				<h5>感谢您的支持，您填写的信息如下：</h5>
				<table border="1">
					<tr>
						<td>所在院校/专业/班级：{{schoolInformation}}</td>
						<td>性别：{{sex}}</td>
					</tr>
					<tr>
						<td>在校期间主要支出：{{SpendingTypeSelect}}</td>
						<td>是否逃过课：{{skipClasses}}</td>
					</tr>
					<tr>
						<td>每天学习多长时间(课余)：{{learningTimeSelect}}</td>
						<td>你认为哪些方面最重要：{{importanceSelect}}</td>
					</tr>
					<tr>
						<td colspan="2">您对学院的建议：{{advise}}</td>
					</tr>
				</table>
			</footer>
		</div>

let app = new Vue({
			el:'#app',
			data:{
				// 在校信息
				schoolInformation:'',

				// 性别
				sex:'',

				// 在校支出选项数据
				SpendingType:['伙食', '学费', '购书', '衣服', '学习用具'],
				// 在校支出绑定属性
				SpendingTypeSelect:[],

				// 是否逃课绑定属性
				skipClasses:'',

				// 学习时间选项数据
				learningTime:['少于1小时',  '1-2小时', '2-3小时', '3-4小时', '4小时以上'],
				// 学习时间属性
				learningTimeSelect:'',

				// 你认为哪些方面最重要选项数据
				importance:['教师', '课程选择', '学校声誉', '教学质量', '教学设施', '学生宿舍', '生活开销'],
				importanceSelect:[],

				// 建议
				advise:'',
			}
		});