本文實(shí)例為大家分享了vue實(shí)現(xiàn)戶籍管理系統(tǒng)的具體代碼，供大家參考，具體內(nèi)容如下

戶籍管理系統(tǒng)，v-model，v-for的引用

界面預(yù)覽

步驟思路：

1.html+css創(chuàng)建

2.引入vue，實(shí)例

3.準(zhǔn)備默認(rèn)數(shù)據(jù)message數(shù)組

4.渲染默認(rèn)數(shù)據(jù)，v-for循環(huán)表單

5.創(chuàng)建一條新數(shù)據(jù)newmessage

6.綁定到輸入框v-model

7.創(chuàng)建一個(gè)添加函數(shù)add()，把新數(shù)據(jù)添加到默認(rèn)數(shù)據(jù)中，newmessage->message

8.添加完后，清空表單，即恢復(fù)newmessage

9.點(diǎn)誰刪誰del()函數(shù)

body部分：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <p id = 'app' v-cloak>  <legend>戶籍管理系統(tǒng)</legend></br>  姓名：<input type="text" placeholder="請(qǐng)輸入用戶名" v-model = 'newmessage.name'></br>  年齡：<input type="text" placeholder="請(qǐng)輸入年齡" v-model = 'newmessage.age'></br>  性別：  <select v-model = 'newmessage.sex'>  <option>男</option>  <option>女</option>  </select></br>  手機(jī)：<input type="text" placeholder="請(qǐng)輸入手機(jī)號(hào)" 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'>手機(jī)</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> </p>

vue部分：

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

相關(guān)學(xué)習(xí)推薦：javascript視頻教程