vue实现在线学生录入系统

最近一直在学Vue，这次做了一个简单的在线学生信息录入系统来巩固一下所学知识。

因为主要是巩固Vue的知识，所以数据也没放数据库，也没用JavaBean或者Servlet，直接写死到表单里了。

具体页面是这样的:

先罗列一下其中用到的Vue的知识点:

①v-for指令的使用

②v-model指令的使用

③v-on/@click指令的使用

再提一下可能会用到的知识点:

①Javascript中对数组头添元素的unshift()方法

②Javascript中对数组删除元素的splice()删除方法

上一下代码，大家结合上面我罗列的知识点，就能很容易看懂它:

 
 
 
 
 #app {
  margin: 50px auto;
  width: 600px;
 }
 
 fieldset {
  border: 10px solid pink;
  margin-bottom: 30px;
 }
 
 fieldset input {
  width: 200px;
  height: 30px;
  margin: 10px 0px;
 }
 
 table {
  width: 600px;
  border: 2px solid pink;
  text-align: center;
 }
 
 thead {
  background-color: pink;
 }
 
 



 
 

 
学生录入系统
 
  姓名:
  
  
  
  年龄:
  
  
  
  性别:
  
   男
   女
  
  
  
  电话:
  
  
 
 创建新用户
 
 
 

 

 

  
姓名
  
性别
  
年龄
  
电话
  
删除
 
 
 

 

  
{{i.name}}
  
{{i.sex}}
  
{{i.age}}
  
{{i.phone}}
  

  删除
  
 
 
 

 


 

更多文章可以点击《Vue.js前端组件学习教程》学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。