vue实现学生录入系统之添加删除功能

一。案例代码

！DOCTYPE html html head meta charset=' UTF-8 ' title vue指令综合案例/title style # app { margin : 50px auto；宽度： 620像素；} fieldset{ border: 2px实心梅花；边距-底部： 20px}字段集输入{ width : 200 px h8 : 30 pxmargin : 10px 0；}表格{ width: 620pxborder: 2px实心梅花；文本对齐：中心；}背景颜色：梅花；}/style/head body div id=' app '字段集图例学生录入系统/图例div跨度姓名：/span输入类型=“文本”占位符='请输入姓名v型='学生姓名/span/span/div span年龄：/span输入类型=“文本”占位符='请输入年龄v-model='学生。年龄'/部门/跨度性别：/span选择v-model='student.sex '选项值='男'男/option选项值='女'女/option/select/div SPanQq:/SPan输入类型=“文本”占位符='请输入QQ' v-model='学生QQ '/div .按钮@点击='createNewStudent()'创建新用户/button /fieldset表和tr td姓名运输署/运输署年龄运输署/运输署性别/td tdQQ/td td删除/TD/tr/ad t body tr-v-for='(p，index)in person ' TD { { p . name } }/TD { { p . age } }/TD { { p . sex } }/TD TD { { p . QQ } }/TD TD TD TD tdbutton @ click=' deleteStudentMsg(index)'删除/button/td /tr /tbody /table /div脚本类型=' text/JAVAScript ' src=' http : js/jquery。js /脚本脚本类型=' text/JAVAScript ' src=' http : js/vue。js /脚本//1。创建某视频剪辑软件的实例让vm=new Vue({ el:'#app '，数据： { person s 3360 [{ name : '张三，年龄：16,性别： '男，QQ:'123456'}，{name: '李四，年龄：17,性别： '男，QQ:'100000'}，{name: '王麻子，年龄：18,性别： '女，QQ:'666666'}，{name: '赵六，年龄：19,性别： '男，QQ:'888888'}，{name: '刘七，年龄：20,性别： '女，QQ:'999999'} ]，学生： {姓名： ' ',年龄：0,性别： '男，QQ:''} }，methods:{ //创建一条新记录createNewStudent(){ //姓名不能为空如果(这个。学生。name==' '){ alert('姓名不能为空');返回；} //年龄不能小于0 if(this.student.age0){ alert('请输入正确年龄');返回；}//QQ如果(这个。学生。age==' '){ alert('请输入正确年龄');返回；} //往数组中添加一条新记录这个。人。卸下(这个。学生)；//清空数据this.student={name: ' '，age:0，sex: '男，QQ : ' ' }；}, //删除deleteStudentMsg(索引){ this.persons.splice(索引，1);} } });/脚本/正文/html二。结果

总结

以上所述是小编给大家介绍的某视频剪辑软件实现学生录入系统之添加删除功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！