Teilen von Methoden zum dynamischen Erstellen und Löschen von Daten in Vue-js-Tutorial-php.cn

Teilen von Methoden zum dynamischen Erstellen und Löschen von Daten in Vue

小云云

Freigeben： 2018-05-15 13:57:37

Original

1747 Leute haben es durchsucht

Dieser Artikel stellt Ihnen hauptsächlich eine Methode zum dynamischen Erstellen und Löschen von Daten in Vue vor. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird. Folgen wir dem Herausgeber, um einen Blick darauf zu werfen. Ich hoffe, es kann allen helfen.

Ansicht:

Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
 //导入vue.js
 <script type="text/javascript" src="./vue.js"></script>
 //非常简单了设置了一下css样式
 <style type="text/css">
 #app{
  height: 100%;
  margin-left: 200px;
  width:50%;
  text-align: center;
  background-color: lightpink
  }
  .tab{
   width: 600px;
   margin-top: 30px;
   background-color: lightpink;
  }
  input{
   height: 25px;
   margin-top: 10px;
   border-radius:5px;
  }
 </style> 
</head>
<body>
 <p id="app">
 <p class="createForm">
  姓名:<input type="text" name="uname" v-model="userName"><br>
  年龄:<input type="text" name="uage" id="uage" v-model="userAge"><br>
  性别:<select name="gender" v-model="selected">
   <option v-for="option in options" v-bind:value="option.gender">
    {{option.gender}}
   </option>    
  </select>
  {{selected}}
  <br>
  <button type="button" v-on:click="insertInfo">创建</button>
 </p> 
 <table class="tab">
  <tr style="background-color: pink">
   <th>姓名</th>
   <th>年龄</th>
   <th>性别</th>
   <th>删除</th>
  </tr>
  <tr v-for="(person,index) in infoArr">
   <td>{{person.uname}}</td>
   <td>{{person.uage}}</td>
   <td>{{person.gender}}</td>
   <td><button v-on:click="deleteInfo(index)">删除</button></td>
  </tr>
 </table>
 </p>
</body>
</html>
<script type="text/javascript">
 new Vue({
  el:"#app",
  data:{
   msg:"hello",
   selected:&#39;女&#39;,
   userName:&#39;&#39;,
   userAge:&#39;&#39;,
   options:[
   {gender:"男"},
   {gender:"女"}
   ],
   infoArr:[]
  },
  methods:{
  //添加数据的方法
   insertInfo(){
    var obj={};
    obj.uname=this.userName;
    obj.uage=this.userAge;
    obj.gender=this.selected;
    this.infoArr.push(obj);
    console.log(obj);
   },
   //删除的方法
   deleteInfo(index){
    this.infoArr.splice(index,1);
   }
  }  
 })

</script>

Nach dem Login kopieren

Verwandte Empfehlungen:

JS fügt Ereignisse zu dynamisch erstellten Elementen hinzu

JS-Methoden zum dynamischen Erstellen von Tags und Attribute festlegen

Detaillierte Erläuterung der dynamischen Erstellungsmethode von QR-Code basierend auf node.js

Das obige ist der detaillierte Inhalt vonTeilen von Methoden zum dynamischen Erstellen und Löschen von Daten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!