Heim > Artikel > Web-Frontend > Parsen der Vue-Methode zum Hinzufügen und Löschen von Elementen

Parsen der Vue-Methode zum Hinzufügen und Löschen von Elementen

不言Original: 2018-06-30 16:17:373173Durchsuche

In diesem Artikel erfahren Sie, wie Sie Elemente in Vue hinzufügen und löschen. Interessierte Freunde können sich darauf beziehen.

Der relevante Versionsbeispielcode lautet wie folgt:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue实例：添加删除元素r</title>
  <style type="text/css">
    .form-group{
      margin:10px;
    }
    .form-group>label{
      display: inline-block;
      width: 5rem;
      text-align: right;
    }
  </style>
</head>
<body>
  <p id="app">
    <p class="form-group">
      <label>name:</label>
      <input type="text" name="" v-model=&#39;newitems.name&#39;>
    </p>
    <p class="form-group">
      <label>age:</label>
      <input type="text" name="" v-model=&#39;newitems.age&#39;>
    </p>
    <p class="form-group">
      <label>sex:</label>
      <select v-model=&#39;newitems.sex&#39;>
        <option value="男">男</option>
        <option value="女">女</option>
      </select>

    </p>
    <p class="form-group">
      <label></label>
      <button v-on:click = &#39;addPerson&#39;>Create</button>
    </p>

    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Sex</th>
          <th>Delete</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items"><!--v-for-->
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.sex}}</td>
          <td><button @click="deletePerson($index)">Delete</button></td>
        </tr>
      </tbody>

    </table>
  </p>

</body>
<script src="vue.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el:&#39;#app&#39;,
    data:{
      newitems:{
        name:&#39;&#39;,
        age:&#39;18&#39;,
        sex:&#39;女&#39;
      },//newitems默认的
      items:[{
        name:&#39;lily&#39;,
        age:18,
        sex:&#39;女&#39;
      },{
        name:&#39;lily&#39;,
        age:18,
        sex:&#39;女&#39;
      },{
        name:&#39;lily&#39;,
        age:18,
        sex:&#39;女&#39;
      },{
        name:&#39;lily&#39;,
        age:18,
        sex:&#39;女&#39;
      },{
        name:&#39;lily&#39;,
        age:18,
        sex:&#39;女&#39;
      }]
    },
    methods:{
      addPerson:function(){
        this.items.push(this.newitems)//往items中添加newitems
        this.newitems = {name:&#39;&#39;,age:&#39;18&#39;,sex:&#39;女&#39;}
      },//添加元素
      deletePerson: function(index){
        // 删一个数组元素
        this.items.splice(index,1);
      }
    }
  })
</script>
</html>

Das Obige ist der gesamte Inhalt dieses Artikels Weitere Informationen finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Über die Mutationsmethode des vue.js-Arrays

Über die Änderungsanalyse von Vue-Erkennungsobjekten und Arrays

Das obige ist der detaillierte Inhalt vonParsen der Vue-Methode zum Hinzufügen und Löschen von Elementen. 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：Über die Mutationsmethode des vue.js-ArraysNächster Artikel：Über die Mutationsmethode des vue.js-Arrays

In Verbindung stehende Artikel

Mehr sehen