vue實作戶籍管理系統的實例解析-js教程-PHP中文網

vue實作戶籍管理系統的實例解析

coldplay.xixi

發布： 2020-07-17 17:38:46

轉載

2929 人瀏覽過

vue實作戶籍管理系統的實例解析

本文實例為大家分享了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>
<p id = &#39;app&#39; v-cloak>
 <legend>户籍管理系统</legend></br>
 姓名：<input type="text" placeholder="请输入用户名" v-model = &#39;newmessage.name&#39;></br>
 年龄：<input type="text" placeholder="请输入年龄" v-model = &#39;newmessage.age&#39;></br>
 性别：
 <select v-model = &#39;newmessage.sex&#39;>
 <option>男</option>
 <option>女</option>
 </select></br>
 手机：<input type="text" placeholder="请输入手机号" v-model = &#39;newmessage.phone&#39;></br>
 <button class = &#39;save&#39; @click = &#39;add()&#39;>保存至用户</button></br>
 <table>
 <tr class = &#39;title&#39;>
 <td width = &#39;100px&#39;>姓名</td>
 <td width = &#39;100px&#39;>性别</td>
 <td width = &#39;100px&#39;>年龄</td>
 <td width = &#39;200px&#39;>手机</td>
 <td width = &#39;100px&#39;>删除</td>
 </tr>
 <tr v-for = &#39;item,index in message&#39;>
 <td>{{item.name}}</td>
 <td>{{item.sex}}</td>
 <td>{{item.age}}</td>
 <td>{{item.phone}}</td>
 <td><button @click = &#39;del(index)&#39;>删除</button></td>
 </tr>
 </table>
</p>

登入後複製

vue部分：

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

登入後複製

相關學習推薦：javascript影片教學

以上是vue實作戶籍管理系統的實例解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！