一.实验名称:
表单控件绑定
二.实验目的:
( 1)熟练掌握应用v-mode1指令实现双向数据绑定的方法,学会使用v-mode1指令绑定文本框、复选框、单选按钮、下拉菜单;
( 2)学会值绑定(将表单控件的值绑定到动态属性)和v-mode1 的修饰符。
三.实验内容
使用v-mode1指今实现表单控件的数据绑定,完成用户注册信息的填写和显示功能。要求︰设计如图1所示的用户注册表单,使用v-mode1指合实现表单控件与Vue实例的相应属性的双向数据绑定,当用户填写信息(或选择)完毕并点击提交按钮,程序将用户填写的信息或选择的结果输出至控制台,或弹窗显示。
四:实验源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<h3>用户注册</h3>
<div id="box">
<table border="1" style="text-align: center;">
<tr>
<td>用户名:</td>
<td><input type="text" v-model="message"></td>
<td>{{message}}</td>
</tr>
<tr>
<td>个人简介:</td>
<td><textarea v-model="info"></textarea></td>
<td>{{info}}</td>
</tr>
<tr>
<td>性别:</td>
<td><input type="radio" value="男" name="sex" v-model="sex">男
<input type="radio" value="女" name="sex" v-model="sex">女</td>
<td>{{sex}}</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input type="checkbox" name="hobby" v-model="checkHobby" :value="hobby[0]">HTML
<input type="checkbox" name="hobby" v-model="checkHobby" :value="hobby[1]">CSS
<input type="checkbox" name="hobby" v-model="checkHobby" :value="hobby[2]">VUE
</td>
<td>{{ checkHobby }}</td>
</tr>
<tr>
<td><span style="size:1px;color:blue;">对爱好进行快捷操作</span></td>
<td>
<input type="button" value="全选" @click="selectAll">
<input type="button" value="全不选" @click="noselectAll">
<input type="button" value="反选" @click="reverseSelect">
</td>
</tr>
<tr>
<td>所在地:</td>
<td>
<select name="loc" id="" v-model="loc">
<option value="尖草坪">尖草坪</option>
<option value="小店区">小店区</option>
<option value="迎泽区">迎泽区</option>
</select>
</td>
<td>{{loc}}</td>
</tr>
<tr>
<td>选择你擅长的技术:</td>
<td>
<select name="movie" id="" v-model="movie" multiple="multiple">
<option value="JAVA">JAVA</option>
<option value="前端VUE">前端VUE</option>
<option value="PHP">PHP</option>
</select>
</td>
<td>{{movie}}</td>
</tr>
<tr>
<td>可选职位:</td>
<td colspan="2">
<select name="job" id="" multiple="multiple" >
<option v-for="jobvalue in joblist" :value="jobvalue">{{jobvalue}}</option>
</select>
<button @click="right">>>></button>
<button @click="left"><<<</button>
<select v-model="selectjob" multiple="multiple">
<option v-for="lista in myjob" :value="lista">{{lista}}</option>
</select>
</td>
</tr>
<tr>
<td colspan="3">
<input type="submit" value="提交" @click="present">
<input type="reset" value="取消" @click="empty">
</td>
</tr>
</table>
</div>
<script type="text/javascript">
var test = new Vue({
el:'#box',
data:{
message:"",
info:"",
sex:"",
checked:false,
temHobby:[],
checkHobby:[],
hobby:["HTML","CSS","VUE"],
loc:"",
movie:[],
joblist:['前端工程师','Java工程师','软件测试'],
job:[],
myjob:[],
selectjob:[]
},
methods: {
selectAll:function(){
this.checkHobby=this.hobby;
},
noselectAll:function(){
this.checkHobby = [];
},
reverseSelect:function(){
this.tempHobby=[];
for (var i = 0; i < this.hobby.length; i++) {
if(!this.checkHobby.includes(this.hobby[i])){
this.checked = true;
this.temHobby.push(this.hobby[i]);
}else{
this.checked = false;
}
}
this.checkHobby = this.tempHobby;
},
right:function(){
for(var i = 0; i<this.joblist.length;i++){
this.job.push(this.joblist[i]);
this.myjob.push(this.joblist[i])
var index = this.joblist.indexOf(this.job[i]);
this.joblist.splice(index,1);
}
this.job=[];
},
left:function(){
for(var i = 0; i<this.selectjob.length;i++){
this.joblist.push(this.selectjob[i]);
var index = this.myjob.indexOf(this.selectjob[i]);
this.myjob.splice(index,1);
}
this.selectjob=[];
},
present(){
alert("姓名:"+this.message +
"\n个人简介:"+this.info+
"\n性别:"+this.sex+
"\n爱好:"+this.checkHobby+
"\n所在地:"+this.loc+
"\n擅长的技术:"+this.movie+
"\n选择职位:"+this.joblist
)
},
empty(){},
},
watch:{
"checkHobby":function(){
if(this.checkHobby.length>0){
this.checked = true;
}else{
this.checked = false;
}
},
},
})
</script>
</body>
</html>
五、运行效果: