Heim > Artikel > Web-Frontend > Vue implementiert Methoden zum dynamischen Erstellen und Löschen von Daten

Vue implementiert Methoden zum dynamischen Erstellen und Löschen von Daten

亚连Original: 2018-05-29 16:29:501394Durchsuche

Im Folgenden werde ich einen Artikel über die Methode von Vue zum dynamischen Erstellen und Löschen von Daten mit Ihnen teilen. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.

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>

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Das Problem und die Lösung des {{}}-Flimmerns beim Rendern von Vue

jQuery implementiert Text mit mehr als 1 Zeile, Methode zum automatischen Hinzufügen von Ellipsen, wenn 2 Zeilen oder eine bestimmte Anzahl von Zeilen vorhanden sind

Methode zum Erhalten von Kontextparameterwerten mithilfe des EL-Ausdrucks in JS

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der dynamischen Komponenten und des Renderings basierend auf vue2.0Nächster Artikel：Detaillierte Erläuterung der dynamischen Komponenten und des Renderings basierend auf vue2.0

In Verbindung stehende Artikel

Mehr sehen