<!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>
vue的小练习
最新推荐文章于 2022-04-06 00:25:27 发布