vue實(shí)現(xiàn)戶籍管理系統(tǒng)

更新時(shí)間：2020年05月29日 17:06:05 作者：馮老心

這篇文章主要介紹了Vue實(shí)現(xiàn)戶籍管理系統(tǒng)，戶籍信息的添加與刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(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>
<div 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>
</div>

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>

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

您可能感興趣的文章: