VUE实现学生用户信息表

一、效果图如图

二、代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/vue.js"></script>
</head>
<body><div id="app"><span>班级:</span><input type="number" v-model="student.grade"></br><span>姓名:</span><input type="text" v-model="student.name"></br><span>性别:</span><select v-model="student.gender"><option value="男">男</option><option value="女">女</option></select></br><span>年龄:</span><input type="number" v-model="student.age"></br><button @click="add">添加学生</button><table border="1" width="50%" style="border-collapse: collapse;"><tr><th>序号</th><th>班级</th><th>姓名</th><th>性别</th><th>年龄</th><th>操作</th></tr><tr align="center" v-for="(item,index) in students"><td>{{index+1}}</td><td>{{item.grade}}</td><td>{{item.name}}</td><td>{{item.gender}}</td><td>{{item.age}}</td><td><button @click="del(index)">删除</button></td></tr></table></div><script>var vm=new Vue({el:'#app',data:{students:[{grade:'1',name:'李四',gender:'男',age: 25},{grade:'2',name:'王五',gender:'女',age: 21}],student:{}},methods:{add(){var p={grade:this.student.grade,name:this.student.name,gender:this.student.gender,age:this.student.age};this.students.push(p)},del(index){this.students.splice(index,1);}}})</script>
</body>
</html>

VUE实现学生用户信息表相关推荐

学生成绩表c语言,学生成绩信息表(c语言程序)
<学生成绩信息表(c语言程序)>由会员分享,可在线阅读,更多相关<学生成绩信息表(c语言程序)(16页珍藏版)>请在人人文库网上搜索. 1. include# include# ...
MySQL - 设计游戏用户信息表
设计游戏用户信息表实现用户登陆模块,具体需求如下: 游戏玩家访问游戏客户端,通过客户端界面输入用户名和密码在游戏玩家点击"确认"后,客户端连接至数据库服务器对用户名和密码进行确 ...
数据库中用户登录注册用户信息表怎么设计如何设计
用户登录站内登录:用户信息+密码的验证形式: 用户名+密码, 手机+密码, 站外授权:第三方登录, 其实它也是用户信息+密码的形式, 用户信息即第三方系统中的ID(第三方登录一定会给一个在他们系统中 ...
已创建了一个包含学生学号、身高、性别的学生身高信息表并输出到屏幕，学生信息从records.txt文件读取。编写一个函数 void reverse(Seqlist *lp)；功能是对已建立的学生身
已创建了一个包含学生学号.身高.性别的学生身高信息表并输出到屏幕,学生信息从records.txt文件读取.(结构体数组版本) (1)30' 编写一个函数 void reverse(Seqlist * ...
数据库的用户信息表设计
用户信息表在很多情况下都需要有,属于一个项目开篇的基础.这个不搞好以后就会给自己带来麻烦. 我参考该博文设计:浅谈数据库用户表结构设计只是有些地方我实践之后需要补充一下: user表字段: user ...
JavaWeb第九次：程序设计题：在MySQL，创建一个学生信息数据库Student，创建一张学生注册信息表message，包含name (姓名)、age (年龄)、sex (性别)、educ
程序设计题: 在MySQL,创建一个学生信息数据库Student,创建一张学生注册信息表message,包含name (姓名).age (年龄).sex (性别).education(学历).phon ...
Vue编写添加用户的表单 ~ 不要错过哦
在写项目的过程中遇到了添加用户信息的功能,今天写出来和大家分享. 希望可以帮助到有需要的小伙伴文章目录使用element-ui实现布局和样式 javascript中的数据.数据的校验规则以及方 ...
第三方登录用户信息表设计
user表:站内账号表,即原始的账号-密码信息表字段有 user_id ,username,password social_account表:第三方账号信息表如 wx_account :微信账号信 ...
记一次vue获取微信用户信息
使用vue静态页获取微信的用户信息,通过调取微信的接口进行实现. 注意:我写的代码判断了只有在微信浏览器打开才可以获取用户信息,别的还没有进行测试!!!!!!!!!! 第一步:获取code getCo ...

VUE实现学生用户信息表

VUE实现学生用户信息表相关推荐

最新文章

热门文章