vue的小练习

最新推荐文章于 2022-04-06 00:25:27 发布

liu1992452008

最新推荐文章于 2022-04-06 00:25:27 发布

阅读量173

点赞数

分类专栏： vuejs

本文链接：https://blog.csdn.net/liu1992452008/article/details/78569906

版权

vuejs 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="vue.js"></script>

	</head>
	<style type="text/css">
		#app {
			margin: 50px auto;
			width: 500px;
			
		}
		fieldset{
			border: 1px solid orange;
		}
		fieldset input{
			width: 400px;
			height: 30px;
			margin: 10px 0;
			
		}
		table{
			width: 500px;
			border: 1px solid orange;
			text-align: center;
			margin-top: 40px;
		}
		thead{
			background-color: orange;
			color: white;
		}
		button{
			width: 90px;
			height: 40px;
			background-color: rosybrown;
		}
	</style>

	<body>
		<div id="app">
		<!--第一部分-->
          <fieldset>
          	<legend>小拇指学生录入系统</legend>
          	<div>
          		<span>姓名：</span>
          		<input type="text" placeholder="请输入姓名" v-model="newStudent.name"/>
          	</div>
          		<div>
          		<span>年龄：</span>
          		<input type="text" placeholder="请输入年龄" v-model="newStudent.age"/>
          	</div>
          		<div>
          		<span>性别：</span>
          		<select name="" v-model="newStudent.sex">
          			<option value="男">男</option>
          			<option value="女">女</option>
          		</select>
          	</div>
          		<div>
          		<span>手机：</span>
          		<input type="text" placeholder="请输入手机号码"/ v-model="newStudent.phone">
          	</div>
          	<button @click="createNewStudent()">创建新用户</button>
          </fieldset>
         <!--第一部分--> 
          <!--第二部分--> 
          <table border="" cellspacing="" cellpadding="">
          	<thead>
          			<tr>
          				<th>姓名</th>
          				<th>性别</th>
          				<th>年龄</th>
          				<th>手机号</th>
          				<th>删除</th>
          			</tr>
          	</thead>
            <tbody>
            	  <tr v-for='(p, index) in persons'>
            	  	   <td>{{p.name}}</td>
            	  	     <td>{{p.sex}}</td>
            	  	       <td>{{p.age}}</td>
            	  	         <td>{{p.phone}}</td>
            	  	         <td><button @click="deleteStudents(index)">删除</button></td>
            	  </tr>
            </tbody>
          	
          </table>
           <!--第二部分--> 
		</div>
			<script type="text/javascript">
				new Vue({
					el: '#app',
					data: {
						persons: [{
								name: '张三',
								age: 19,
								sex: '男',
								phone: 17834783784
							},
							{
								name: 'lisi',
								age: 31,
								sex: '男',
								phone: 1786666784
							},
							{
								name: '王五',
								age: 22,
								sex: '女',
								phone: 1783477777
							},
							{
								name: '赵四',
								age: 29,
								sex: '男',
								phone: 178347446544
							},
							{
								name: '马云',
								age: 49,
								sex: '男',
								phone: 17834786666
							}
						],
						newStudent:{name:'',age:0,sex:'',phone:''}
					},
					methods:{
						createNewStudent(){
							//姓名不能为空
							if(this.newStudent.name===''){
								alert('姓名不能为空');
								return;
							}
							if(this.newStudent.age<=0){
								alert('请输入正确的年龄');
								return;
							}
							
							if(this.newStudent.phone===''){
								alert('手机不能为空');
								return;
							}
							//往数组添加一条新数据
							this.persons.unshift(this.newStudent)
							//清空数据
							this.newStudent={name:'',age:0,sex:'',phone:''}
						},
						//删除一条学生记录
					deleteStudents(index){
						this.persons.splice(index,1);
						
					}
					}
					
				})
			</script>
	</body>

</html>

liu1992452008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue的小练习

#app { margin: 50px auto; width: 500px; } fieldset{ border: 1px solid orange; } fieldset input{ width: 400px; height: 30px; margin: 10px 0; } table{ width: 500
复制链接

扫一扫

专栏目录