Beispielanalyse der Vue-Implementierung des Haushaltsregistrierungsverwaltungssystems

Das Beispiel in diesem Artikel teilt den spezifischen Code von Vue zur Implementierung des Haushaltsregistrierungsverwaltungssystems als Referenz. Der spezifische Inhalt ist wie folgt:

Haushaltsregistrierungsverwaltungssystem , V-Modell, V- Referenz für

Schnittstellenvorschau

Schrittideen:

1. HTML+CSS-Erstellung

2. Vue einführen, Instanz

3. Standarddaten-Nachrichtenarray vorbereiten

4 🎜>5. Erstellen Sie eine neue Datennachricht

6. Binden Sie an das Eingabefeld v-model

7. Erstellen Sie eine Add-On-Funktion add(), um neue Daten zu den Standarddaten hinzuzufügen ->Nachricht

8. Löschen Sie nach dem Hinzufügen das Formular und stellen Sie die neue Nachricht wieder her

9. Klicken Sie auf die Funktion „Wer löscht wen“

Körperteil:

<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-Teil:

<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-Stil:

<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-Video-Tutorial

Das obige ist der detaillierte Inhalt vonBeispielanalyse der Vue-Implementierung des Haushaltsregistrierungsverwaltungssystems. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!