VUE框架-01

最新推荐文章于 2023-05-29 11:44:19 发布

劫；道

最新推荐文章于 2023-05-29 11:44:19 发布

阅读量109

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_44091363/article/details/89526147

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

做一个学生录入系统

思路:1,用v-model双向输入表的信息

2 得到的信息放入user[]数组中

3 另外建个接收学生信息的表单,通过v-for遍历user[]的分别得到学生的信息

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	//创建dom事件
<div id="add">
	<form>
<!--fiekdset是设置表单外边框-->
   <fieldset style="width: 300px; ">
<!-- legend为fieldset的标题 -->
   <legend>学生信息录入系统</legend>
<!---用v-model拿到信息--->
<!---用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动 
  选取正确的方法来更新元素。--->
	姓名:<input type="text" name="nmae" placeholder="请输入姓名" v- 
           model="name" />
	<br/><br>
	年龄:<input type="text" name="age"  value="0" v-model="age"/>
	<br/><br>
	性别:<select v-model="sex">
		   <option>男</option>
		   <option>女</option>
		</select>
		<br/><br>
	手机:<input type="text" name="PhoneNumber" placeholder="请输入手机号 
           码" v-model="phoneNumber" />
	<!---监听点击事件,绑定事件方法users,--->
		<input type="button" value="创建新用户" @click="users"/>
</fieldset>
</form>
<table border="1" style="text-align: center;">
<!---建立表头--->
	<tr>
		<th width="100px">姓名</th>
		<th width="100px">年龄</th>
		<th width="100px">性别</th>
		<th width="200px">手机</th>
		<th width="100px">删除</th>
	</tr>
<!---用v-for循环遍历出user[]数组--->
	<tr v-for="(itme,index) in user">
		<td>{{itme.name}}</td>
		<td>{{itme.age}}</td>
		<td>{{itme.sex}}</td>
		<td>{{itme.phoneNumber}}</td>
<!---用v-bind绑定点击事件--->
		<td><button @click="dle(index)">删除</button></td>
	</tr>
</table>
</div>
</body>
<script>
	 var scripts=new Vue({
	//挂载dom事件
		el:"#add",
		data:{
			name:'',
			age:'0',
			sex:'男',
			phoneNumber:'',
			user:[
				{name:"马志明",age:20,sex:"男",phoneNumber:"15901837263"}
			]
		},
		methods:{
			users:function(){
				if(this.name==""){
					alert("姓名不能为空");
				}else if(this.age.length<1){
					alert("年龄不能小于0");
				}else{
					//console.log(this.phoneNumber)
					//将取到的值放进(push)user数组里
				this.user.push({name:this.name,age:this.age,sex:this.sex,
                    phoneNumber:this.phoneNumber});
				}
			},
			//删除
			dle:function(index){
				this.user.splice(index,1);
			}
		}
		
	})
</script>
</html>