Exemple d'analyse de la mise en œuvre de Vue du système de gestion de l'enregistrement des ménages

L'exemple de cet article partage le code spécifique de Vue pour implémenter le système de gestion de l'enregistrement des ménages pour votre référence. Le contenu spécifique est le suivant

Système de gestion de l'enregistrement des ménages. , v-model, v- Référence pour pour

Aperçu de l'interface

Idées d'étapes :

1. Création html+css

2. Introduire vue, instance

3 Préparer le tableau de messages de données par défaut

4. Rendre les données par défaut, forme de boucle v-for

5. Créer un nouveau message de données

6. Lier au modèle v de la boîte de saisie

7. Créez une fonction d'ajout add() pour ajouter de nouvelles données aux données par défaut. , newmessage->message

8. Après l'ajout, effacez le formulaire et restaurez le nouveau message

9. Cliquez sur qui supprime la fonction who del()

partie du corps :

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

partie 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>

style 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>

Recommandations d'apprentissage associées :

tutoriel vidéo javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!