如何使用vue實現(xiàn)戶籍管理系統(tǒng)

如何使用vue實現(xiàn)戶籍管理系統(tǒng)？針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

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

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

界面預(yù)覽

步驟思路：

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

2.引入vue，實例

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)建一個添加函數(shù)add()，把新數(shù)據(jù)添加到默認(rèn)數(shù)據(jù)中，newmessage->message

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

9.點誰刪誰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="請輸入用戶名" 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>
</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('請輸入姓名！');
  }
 },
 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)于如何使用vue實現(xiàn)戶籍管理系統(tǒng)問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。