蝙蝠岛资源网 Design By www.hbtsch.com
本文实例为大家分享了vue实现表单录入的具体代码,供大家参考,具体内容如下
最终效果:
代码:
<template> <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 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> <thead> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>手机</td> <td>删除</td> </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="deleteStudentMsg(index)">删除</button> </td> </tr> </tbody> </table> </div> </template> <script> export default { name: "todolist2", data(){ return{ persons: [ {name: '张三', age: 20, sex: '男', phone: '18932323232'}, {name: '李四', age: 30, sex: '男', phone: '18921212122'}, {name: '王五', age: 20, sex: '男', phone: '18932223232'}, {name: '赵六', age: 25, sex: '女', phone: '18932322232'}, ], newStudent: {name: '', age: 0, sex: '男', phone: ''} } }, methods: { // 创建一条新纪录 createNewStudent(){ // 姓名不能为空 if(this.newStudent.name === ''){ alert('姓名不能为空'); return; } // 年龄不能小于0 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: ''} }, // 删除一条学生纪录 deleteStudentMsg(index){ this.persons.splice(index,1); } }, } </script> <style scoped> #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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
vue,表单录入
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com
暂无vue实现表单录入小案例的评论...
更新日志
2024年12月25日
2024年12月25日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]