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

网络编程发布日期：2024/9/26 浏览次数：1

正在浏览：vue实现学生录入系统之添加删除功能

一.案例代码

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>vue指令综合案例</title>
 <style>
  #app{
  margin: 50px auto;
  width: 620px;
  }
  fieldset{
  border: 2px solid plum;
  margin-bottom: 20px;
  }
  fieldset input{
  width: 200px;
  height: 30px;
  margin: 10px 0;
  }
  table{
  width: 620px;
  border: 2px solid plum;
  text-align: center;
  }
  thead{
  background-color: plum;
  }
  
 </style>
 </head>
 <body>
 <div id="app">
  <fieldset>
  <legend>学生录入系统</legend>
  <div>
   <span>姓名：</span>
   <input type="text" placeholder="请输入姓名" v-model="student.name"/>
   <span></span>
  </div>
  <div>
   <span>年龄：</span>
   <input type="text" placeholder="请输入年龄" v-model="student.age"/>
  </div>
  <div>
   <span>性别：</span>
   <select v-model="student.sex">
   <option value="男">男</option>
   <option value="女">女</option>
   </select>
  </div>
  <div>
   <span>QQ：</span>
   <input type="text" placeholder="请输入QQ" v-model="student.QQ"/>
  </div>
  <button @click="createNewStudent()">创建新用户</button>
  </fieldset>
  <table>
  <thead>
   <tr>
   <td>姓名</td>
   <td>年龄</td>
   <td>性别</td>
   <td>QQ</td>
   <td>删除</td>
   </tr>
  </thead>
  <tbody>
   <tr v-for="(p,index) in persons">
   <td>{{p.name}}</td>
   <td>{{p.age}}</td>
   <td>{{p.sex}}</td>
   <td>{{p.QQ}}</td>
   <td><button @click="deleteStudentMsg(index)">删除</button></td>
   </tr>
  </tbody>
  </table>
 </div>
 <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.js">

二.结果



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

上一篇：vue移动端实现红包雨效果

下一篇：微信小程序实现红包雨功能

一句话新闻

高通与谷歌联手！首款骁龙PC优化Chrome浏览器发布

高通和谷歌日前宣布，推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中，全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前，搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世，有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示，此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。