vue 온라인 학생 입력 시스템 구현

5141 단어 vue입력 시스템
최근 에 계속 Vue 를 배우 고 있 는데 이번 에는 간단 한 온라인 학생 정보 입력 시스템 을 만들어 배 운 지식 을 공 고 히 했다.
주로 Vue 의 지식 을 공 고 히 하기 때문에 데이터 베 이 스 를 넣 지 않 았 고 자바 빈 이나 Servlet 을 사용 하지 않 고 폼 에 직접 써 죽 었 습 니 다.
구체 적 인 페이지 는 다음 과 같 습 니 다:

우선 그 중 에 사용 되 는 Vue 의 지식 포 인 트 를 나열 합 니 다.
① v-for 명령 의 사용
② v-model 명령 의 사용
③ v-on/@click 명령 의 사용
사용 할 수 있 는 지식 포 인 트 를 다시 한 번 말씀 드 리 겠 습 니 다.
① JavaScript 에서 배열 헤더 에 요 소 를 추가 하 는 unshift()방법
② 자 바스 크 립 트 에서 배열 삭제 요소 에 대한 splice()삭제 방법
지난번 코드 에서 여러분 은 위 에 제 가 나열 한 지식 점 과 결합 하면 쉽게 이해 할 수 있 습 니 다.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>        </title>
 <style>
 /*css     */
 #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>      </legend>
 <div>
  <div><span>  :</span>
  <!-- v-model         ，     -->
  <input type="text" placeholder="     " v-model=" newMessage.name">
  </div>
  <div><span>  :</span>
  <input type="text" placeholder="     " 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="       " v-model=" newMessage.phone">
  </div>
 </div>
 <button @click="createNewMessage()">     </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: {
  //      
  createNewMessage() {
  //    
  if (this.newMessage.name === "") {
   alert("     !");
   return;
  }
  if (this.newMessage.age <= 0) {
   alert("       !");
   return;
  }
  if (this.newMessage.phone === "") {
   alert("       !");
   return;
  }
 
  //    unshift             
  this.persons.unshift(this.newMessage);
  //    
  this.newMessage = {name: '', age: '', sex: ' ', phone: ''};
  },
 
  //    
  deleteStuMessage(index) {
  this.persons.splice(index, 1);
  }
 },
 
 
 });
 
</script>
 
</body>
</html>
더 많은 글 은Vue.js 전단 구성 요소 학습 튜 토리 얼을 클릭 하여 읽 기 를 배 울 수 있다.
vue.js 구성 요소 에 대한 튜 토리 얼 은 주제vue.js 구성 요소 학습 강좌를 클릭 하여 학습 하 십시오.
더 많은 vue 학습 튜 토리 얼 은 주 제 를 읽 으 세 요《vue 실전 교정》.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
vue 학생 정보 관리 시스템 실현
asp Http_Referer,Server_Name 과 HttpHost

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage