vue常用指令实现学生录入系统的实战
时间：2022-12-15 10:32:17 | 栏目：vue | 点击：次
一、功能描述：
1，对于输入的内容进行简单的判断。
2，实现简单的增加和删除功能。
二、运行情况
图1 页面初始化情况
点击"添加新用户"如下：
图2： 添加一个新用户
图3：删除Anna和张三两个用户
全部代码如下所示：（直接复制到一个.html文件即可成功运行）
<!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>01-VUE的常用指令-综合练习</title>
<style>
#app {margin: 50px auto; width: 600px;}
fieldset {border: 1px solid orangered;margin-bottom:20px;}
fieldset input{width: 200px; height: 30px; margin: 10px 0;}
table{width: 600px;border: 2px solid orangered; text-align: center;}
thead{background-color: orangered;}
</style>
</head>
<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 v-model="newStudent.sex">
<option>男</option>
<option>女</option>
</select>
</div>
<div>
<span>手机：</span>
<input type="text" placeholder="请输入手机号" v-model="newStudent.phone">
</div>
<div>
<button @click="createNewStu()">添加新用户</button>
</div>
</fieldset>
<!-- 第二部分 -->
<table>
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>手机</td>
<td>删除</td>
</tr>
</thead>
<tbody>
<tr v-for="(stu,index) in students" :key="index">
<td>{{stu.name}}</td>
<td>{{stu.sex}}</td>
<td>{{stu.age}}</td>
<td>{{stu.phone}}</td>
<td>
<button @click="delStudent(index)"> 删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
students:[
{name:'张三',sex:'男',age:20,phone:'18722222'},
{name:'李四',sex:'女',age:10,phone:'18733333'},
{name:'王五',sex:'女',age:24,phone:'18744444'},
{name:'赵六',sex:'男',age:25,phone:'18755555'}
],
newStudent:{name:'',sex:'男',sge:'0',phone:''}
},
methods:{
//插入记录
createNewStu(){
//1,姓名不能为空
if(this.newStudent.name === ''){
alert('姓名不能为空');
return;
}
//2,验证年龄
if(this.newStudent.age <= 0){
alert('请输入正确的年龄');
return;
}
//3,验证手机号
if(this.newStudent.phone ===''){
alert('请输入正确的手机号');
return;
}
//4,插入新纪录
this.students.unshift(this.newStudent);
//5,清除记录
this.newStudent = {name:'',sex:'男',sge:'0',phone:''};
},
delStudent(index){
this.students.splice(index,1);
}
}
});
</script>
</body>
</html>
相关JS代码如下：
<script>
new Vue({
el:'#app',
data:{
students:[
{name:'张三',sex:'男',age:20,phone:'18722222'},
{name:'李四',sex:'女',age:10,phone:'18733333'},
{name:'王五',sex:'女',age:24,phone:'18744444'},
{name:'赵六',sex:'男',age:25,phone:'18755555'}
],
newStudent:{name:'',sex:'男',sge:'0',phone:''}
},
methods:{
//插入记录
createNewStu(){
//1,姓名不能为空
if(this.newStudent.name === ''){
alert('姓名不能为空');
return;
}
//2,验证年龄
if(this.newStudent.age <= 0){
alert('请输入正确的年龄');
return;
}
//3,验证手机号
if(this.newStudent.phone ===''){
alert('请输入正确的手机号');
return;
}
//4,插入新纪录
this.students.unshift(this.newStudent);
//5,清除记录
this.newStudent = {name:'',sex:'男',sge:'0',phone:''};
},
delStudent(index){
this.students.splice(index,1);
}
}
});
</script>