代码:
<!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>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
fieldset {
width: 45%;
margin: 20px auto;
border-color: #6495ED;
padding: 10px;
box-sizing: border-box;
}
input {
width: 250px;
height: 30px;
outline: none;
border: 1px solid gray;
border-radius: 3px;
}
li {
margin-bottom: 20px;
}
button {
width: 90px;
height: 30px;
color: white;
background-color: rgb(23, 175, 236);
border-radius: 3px;
border: none;
cursor: pointer;
}
table {
width: 45%;
margin: 20px auto;
border: 2px solid rgb(23, 175, 236);
text-align: center;
}
thead {
background-color: rgb(23, 175, 236);
color: #fff;
line-height: 40px;
}
tr {
line-height: 35px;
}
tr:nth-of-type(2n) {
background-color: #EBEBEB;
}
span {
color: red;
}
</style>
</head>
<body>
<div id="app">
<fieldset>
<legend>学生信息录入系统</legend>
<ul>
<li>姓名:<input type="text" placeholder="2到10位用户名" v-model="student.name"><span
v-show="bolname">请输入2到10位字符</span></li>
<li>年龄:<input type="text" placeholder="请输入年龄" v-model="student.age"><span
v-show="bolage">请输入正确的年龄</span>
</li>
<li>性别:<select v-model="student.sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</li>
<li>手机:<input type="text" placeholder="请输入手机号" v-model="student.phone"><span
v-show="bolphone">请输入正确的手机号</span></li>
<li><button @click="btnuser">添加用户</button></li>
</ul>
</fieldset>
<!-- 信息内容 -->
<table cellspacing="0">
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>手机</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in stuinfo">
<td>{{item.name}}</td>
<td>{{item.sex}}</td>
<td>{{item.age}}</td>
<td>{{item.phone}}</td>
<td><button @click="del(index)">删除</button></td>
</tr>
<!-- <tr>
<td>赵虎</td>
</td>
<td>女</td>
<td>20</td>
<td>15224711693</td>
<td><button>删除</button></td>
</tr> -->
</tbody>
</table>
</div>
</body>
</html>
<script src="./lib/vue.js"></script>
<script>
let vue = new Vue({
el: '#app',
data: {
// 学生信息表数据
stuinfo: [
{ name: '张龙', age: '25', sex: '男', phone: '15224711692' },
{ name: '李四', age: '18', sex: '女', phone: '15224711693' },
{ name: '屌丝', age: '85', sex: '女', phone: '15224711694' },
{ name: '胡说', age: '45', sex: '男', phone: '15224711695' },
{ name: '智慧', age: '5', sex: '男', phone: '15224711696' }
],
// 获取input 输入框内容
student: { name: '', age: '', sex: '男', phone: '' },
// 分别控制用户名 年龄 手机号 输入不合法是的提示信息 false 隐藏 true 显示
bolname: false,
bolage: false,
bolphone: false
},
methods: {
btnuser() {
// 正则表达式 验证输入是否规范
// 用户名
let username = /[\u4e00-\u9fa5]{2,10}/gm;
// 年龄
let ages = /^([0-9]|[0-9]{2}|100)$/;
// 手机号
let phonenum = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
// 用户名判断 不合法 将bolname 为true
if (!(username.test(this.student.name))) {
this.bolname = true;
return;
} else {
this.bolname = false;
}
if (!(ages.test(this.student.age))) {
this.bolage = true;
return;
} else {
this.bolage = false;
}
if (!(phonenum.test(this.student.phone))) {
this.bolphone = true;
return;
} else {
this.bolphone = false;
}
// 点击添加时 将信息添加到学生信息表的首位
this.stuinfo.unshift(this.student);
// 将input 框内容 清空
this.student = { name: '', age: '', sex: '男', phone: '' };
},
del(index) {
// 点击删除将 将信息删除
this.stuinfo.splice(index, 1);
// console.log(this.stuinfo[index]);
}
}
});
</script>
Roger_2003: 运行结果和你的不一样呀,是不是少代码了