vue實(shí)現(xiàn)在線學(xué)生錄入系統(tǒng)

更新時(shí)間：2020年05月30日 10:47:35 作者：nZk丶

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)在線學(xué)生錄入系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

最近一直在學(xué)Vue，這次做了一個(gè)簡(jiǎn)單的在線學(xué)生信息錄入系統(tǒng)來(lái)鞏固一下所學(xué)知識(shí)。

因?yàn)橹饕庆柟蘓ue的知識(shí)，所以數(shù)據(jù)也沒(méi)放數(shù)據(jù)庫(kù)，也沒(méi)用JavaBean或者Servlet，直接寫(xiě)死到表單里了。

具體頁(yè)面是這樣的:

先羅列一下其中用到的Vue的知識(shí)點(diǎn):

①v-for指令的使用

②v-model指令的使用

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

再提一下可能會(huì)用到的知識(shí)點(diǎn):

①JavaScript中對(duì)數(shù)組頭添元素的unshift()方法

②JavaScript中對(duì)數(shù)組刪除元素的splice()刪除方法

上一下代碼，大家結(jié)合上面我羅列的知識(shí)點(diǎn)，就能很容易看懂它:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>在線學(xué)生信息錄入</title>
 <style>
 /*css樣式設(shè)置 */
 #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;
 }
 
 </style>
</head>
<body>
<div id="app">
 <!--信息輸入框-->
 <fieldset>
 <legend>學(xué)生錄入系統(tǒng)</legend>
 <div>
  <div><span>姓名:</span>
  <!--用v-model指令綁定輸入的信息，更新到表格-->
  <input type="text" placeholder="請(qǐng)輸入姓名" v-model=" newMessage.name">
  </div>
  <div><span>年齡:</span>
  <input type="text" placeholder="請(qǐng)輸入年齡" v-model=" newMessage.age">
  </div>
  <div>
  <span>性別:</span>
  <select v-model=" newMessage.sex">
   <option value="男">男</option>
   <option value="女">女</option>
  </select>
  </div>
  <div>
  <span>電話:</span>
  <input type="text" placeholder="請(qǐng)輸入電話號(hào)碼" v-model=" newMessage.phone">
  </div>
 </div>
 <button @click="createNewMessage()">創(chuàng)建新用戶</button>
 </fieldset>
 <!--信息顯示框-->
 <table>
 <thead>
 <tr>
  <td>姓名</td>
  <td>性別</td>
  <td>年齡</td>
  <td>電話</td>
  <td>刪除</td>
 </tr>
 </thead>
 <tbody>
 <tr v-for="(i,index) in persons">
  <td>{{i.name}}</td>
  <td>{{i.sex}}</td>
  <td>{{i.age}}</td>
  <td>{{i.phone}}</td>
  <td>
  <button @click=" deleteStuMessage(index)">刪除</button>
  </td>
 </tr>
 </tbody>
 </table>
</div>
 
<script src="vue.min.js"></script>
<script>
 new Vue({
 el: '#app',
 data: {
  persons: [
  {name: '王舞', age: 20, sex: '女', phone: '13547878787'},
  {name: '青峰', age: 22, sex: '男', phone: '13547878784'},
  {name: '小倩', age: 24, sex: '女', phone: '13547878781'},
  {name: '阿航', age: 22, sex: '男', phone: '13547878786'},
  ],
  newMessage: {name: '', age: '', sex: '男', phone: ''}
 },
 
 methods: {
  // 創(chuàng)建新記錄
  createNewMessage() {
  //添加約束
  if (this.newMessage.name === "") {
   alert("請(qǐng)輸入姓名!");
   return;
  }
  if (this.newMessage.age <= 0) {
   alert("請(qǐng)輸入正確年齡!");
   return;
  }
  if (this.newMessage.phone === "") {
   alert("請(qǐng)?zhí)顚?xiě)手機(jī)號(hào)碼!");
   return;
  }
 
  //用數(shù)組的unshift方法將新創(chuàng)建的信息加到表頭
  this.persons.unshift(this.newMessage);
  //清空數(shù)據(jù)
  this.newMessage = {name: '', age: '', sex: '男', phone: ''};
  },
 
  //刪除記錄
  deleteStuMessage(index) {
  this.persons.splice(index, 1);
  }
 },
 
 
 });
 
</script>
 
</body>
</html>

更多文章可以點(diǎn)擊《Vue.js前端組件學(xué)習(xí)教程》學(xué)習(xí)閱讀。

關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

更多vue學(xué)習(xí)教程請(qǐng)閱讀專題《vue實(shí)戰(zhàn)教程》

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: