明霞山资源网 Design By www.htccd.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.htccd.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
明霞山资源网 Design By www.htccd.com
暂无评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。