Exemple d'analyse de la mise en œuvre de Vue du système de gestion de l'enregistrement des ménages-js tutoriel-php.cn

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

coldplay.xixi

Libérer： 2020-07-17 17:38:46

avant

2928 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

Recommandations d'apprentissage associées :