本文例項為大家分享了vue實現戶籍管理系統的具體程式碼，供大家參考，具體內容如下

戶籍管理系統，v-model，v-for的引用
介面預覽

步驟思路：

1.html+css建立

2.引入vue，例項

3.準備預設資料message陣列

4.渲染預設資料，v-for迴圈表單

5.建立一條新資料newmessage

6.繫結到輸入框v-model

7.建立一個新增函式add()，把新資料新增到預設資料中，newmessage->message

8.新增完後，清空表單，即恢復newmessage

9.點誰刪誰del()函式

body部分：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id = 'app' v-cloak>
 <legend>戶籍管理系統</legend></br>
 姓名：<input type="text" placeholder="請輸入使用者名稱" v-model = 'newmessage.name'></br>
 年齡：<input type="text" placeholder="請輸入年齡" v-model = 'newmessage.age'></br>
 性別：
 <select v-model = 'newmessage.sex'>
  <option>男</option>
  <option>女</option>
 </select></br>
 手機：<input type="text" placeholder="請輸入手機號" v-model = 'newmessage.phone'></br>
 <button class = 'save' @click = 'add()'>儲存至使用者</button></br>
 <table>
 <tr class = 'title'>
  <td width = '100px'>姓名</td>
  <td width = '100px'>性別</td>
  <td width = '100px'>年齡</td>
  <td width = '200px'>手機</td>
  <td width = '100px'>刪除</td>
 </tr>
 <tr v-for = 'item,index in message'>
  <td>{{item.name}}</td>
  <td>{{item.sex}}</td>
  <td>{{item.age}}</td>
  <td>{{item.phone}}</td>
  <td><button @click = 'del(index)'>刪除</button></td>
 </tr>
 </table>
</div>

vue部分：

<script>
 var app = new Vue({
  el:'#app',data:{
  message:[
   {
   name:'張三',sex:'女',age:16,phone:'1568888811'
   },{
   name:'李四',sex:'男',age:26,phone:'1456666622'
   },{
   name:'王麻子',age:36,phone:'1866666666'
   },],newmessage:{name:'',age:'',phone:''},},methods:{
  add(){
   if(!this.newmessage.name == ''){
   this.message.push(this.newmessage);
   this.newmessage = {
    name:'',phone:''
   };
   }
   else{
   alert('請輸入姓名！');
   }
  },del(index){
   this.message.splice(index,1);
  }
  }
 })
 </script>

css樣式：

<style>
 *{
  margin:0;
  padding:0;
 }
 #app{
  border: 1px solid black;
  width:800px;
  padding:30px 30px;
 }
 #app .save{
  background-color: #555555;
  border-radius: 10%;
  height:50px;
  color:white;
 }
 #app input,select{
  margin:10px 0;
  width:300px;
 }
 #app td{
  text-align: center;
 }
 #app .title td{
  background-color: #555555;
  color:white;
 }
 #app table button{
  background-color: #555555;
  color:white;
  border-radius: 30%;
 }
 </style>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。