vue实现表单录入小案例

本文实例为大家分享了某视频剪辑软件实现表单录入的具体代码，供大家参考，具体内容如下

最终效果：

代码：

模板div id='app '！-第一部分-字段集图例学生录入系统/图例div跨度姓名：/span输入类型=“文本”占位符='请输入姓名v-model=' newstudent。名称'/div/span年龄：/span输入类型=“文本”占位符='请输入年龄v型=' newstudent。年龄/部门跨度性别：/span选择v型='newStudent.sex '选项值='男'男/option选项值='女'女/选项/选择/div/span手机：/span输入类型=“文本”占位符='请输入手机号码v-model='newStudent.phone' /div按钮@click='createNewStudent()'创建新用户/button /fieldset！-第二部分-表格和tr td姓名运输署/运输署性别运输署/运输署年龄运输署/运输署手机运输署/运输署删除/TD/tr/ad t body tr-v-for='(p，index)in person ' TD { { p . name } }/TD { { p . sexual } }/TD { { p . age } }/TD TD { { p . phone } }/TD TD button @ click=' deleteStudentMsg(index)'删除/button/TD/tr/t正文/表格/div/模板脚本导出默认值{ name: ' todolist2 '，data(){ return { person s 3360 [{ name : '张三，年龄： 20,性别： '男，电话： '18932323232'},{姓名： '李四，年龄： 30,性别： '男，电话： '18921212122'},{姓名： '王五，年龄： 20,性别： '男，电话： '18932223232'},{姓名： '赵六，年龄： 25岁，性别： '女，电话： ' 1893232232 ' },],新闻研究： {姓名： ' ',年龄： 0,性别： '男，phone: ''} } }，methods: { //创建一条新纪录createNewStudent(){ //姓名不能为空如果(这个。新闻研究。name==' '){ alert('姓名不能为空');返回；} //年龄不能小于0如果(this.newStudent.age=0){ alert('请输入正确的年龄');返回；} //手机号码如果(这个。新闻研究。phone==' '){ alert('手机号码不正确');返回；} //往数组中添加一条新纪录这个。人。卸下(这个。newstudent)；//清空数据this.newStudent={name: ' '，age: 0，sex: '男，phone: ''} }，//删除一条学生纪录deleteStudentMsg(索引){ this.persons.splice(索引，1);} },}/脚本样式范围为# app { margin: 50px auto宽度： 600像素；} fieldset{ border: 1px实心橙色；边距-底部： 20px}字段集输入{ width : 200 px h8 : 30 pxmargin : 10px 0；}表格{ width: 600pxborder: 2px实心橙色；文本对齐：中心；}背景颜色为橙色的；}/样式以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。