快捷導(dǎo)航

vue實現(xiàn)表單錄入小案例

更新時間：2019年09月27日 11:06:47 作者：小羽向前跑

這篇文章主要為大家詳細介紹了vue實現(xiàn)表單錄入小案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)表單錄入的具體代碼，供大家參考，具體內(nèi)容如下

最終效果：

代碼：

<template>
 <div id="app">
 <!--第一部分-->
 <fieldset>
  <legend>學(xué)生錄入系統(tǒng)</legend>
  <div>
  <span>姓名:</span>
  <input type="text" placeholder="請輸入姓名" v-model="newStudent.name">
  </div>
  <div>
  <span>年齡:</span>
  <input type="text" placeholder="請輸入年齡" v-model="newStudent.age">
  </div>
  <div>
  <span>性別:</span>
  <select v-model="newStudent.sex">
   <option value="男">男</option>
   <option value="女">女</option>
  </select>
  </div>
  <div>
  <span>手機:</span>
  <input type="text" placeholder="請輸入手機號碼" v-model="newStudent.phone">
  </div>
  <button @click="createNewStudent()">創(chuàng)建新用戶</button>
 </fieldset>
 <!--第二部分-->
 <table>
  <thead>
  <tr>
  <td>姓名</td>
  <td>性別</td>
  <td>年齡</td>
  <td>手機</td>
  <td>刪除</td>
  </tr>
  </thead>
  <tbody>
  <tr v-for="(p, index) in persons">
  <td>{{p.name}}</td>
  <td>{{p.sex}}</td>
  <td>{{p.age}}</td>
  <td>{{p.phone}}</td>
  <td>
   <button @click="deleteStudentMsg(index)">刪除</button>
  </td>
  </tr>
  </tbody>
 </table>
 </div>
</template>
 
<script>
 export default {
  name: "todolist2",
  data(){
   return{
   persons: [
    {name: '張三', age: 20, sex: '男', phone: '18932323232'},
    {name: '李四', age: 30, sex: '男', phone: '18921212122'},
    {name: '王五', age: 20, sex: '男', phone: '18932223232'},
    {name: '趙六', age: 25, sex: '女', phone: '18932322232'},
   ],
   newStudent: {name: '', age: 0, sex: '男', phone: ''}
   }
  },
  methods: {
  // 創(chuàng)建一條新紀(jì)錄
  createNewStudent(){
   // 姓名不能為空
   if(this.newStudent.name === ''){
   alert('姓名不能為空');
   return;
   }
 
   // 年齡不能小于0
   if(this.newStudent.age <= 0){
   alert('請輸入正確的年齡');
   return;
   }
 
   // 手機號碼
   if(this.newStudent.phone === ''){
   alert('手機號碼不正確');
   return;
   }
 
   // 往數(shù)組中添加一條新紀(jì)錄
   this.persons.unshift(this.newStudent);
   // 清空數(shù)據(jù)
   this.newStudent = {name: '', age: 0, sex: '男', phone: ''}
  },
 
  // 刪除一條學(xué)生紀(jì)錄
  deleteStudentMsg(index){
   this.persons.splice(index,1);
  }
  },
 }
</script>
 
<style scoped>
 #app{
 margin: 50px auto;
 width: 600px;
 }
 
 fieldset{
 border: 1px solid orangered;
 margin-bottom: 20px;
 }
 
 fieldset input{
 width: 200px;
 height: 30px;
 margin: 10px 0;
 }
 
 table{
 width: 600px;
 border: 2px solid orangered;
 text-align: center;
 }
 
 thead{
 background-color: orangered;
 }
</style>

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

您可能感興趣的文章: