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

創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站建設、成都網(wǎng)站設計與策劃設計,南岸網(wǎng)站建設哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設10多年,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:南岸等地區(qū)。南岸做網(wǎng)站價格咨詢:13518219792

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

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

界面預覽

步驟思路：

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

2.引入vue，實例

3.準備默認數(shù)據(jù)message數(shù)組

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

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

6.綁定到輸入框v-model

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

8.添加完后，清空表單，即恢復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>

關于如何使用vue實現(xiàn)戶籍管理系統(tǒng)問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關知識。

本文題目：如何使用vue實現(xiàn)戶籍管理系統(tǒng)
分享URL：http://www.chinadenli.net/article46/igjdeg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供關鍵詞優(yōu)化、網(wǎng)站內(nèi)鏈、外貿(mào)建站、網(wǎng)站排名、企業(yè)建站、標簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)