Parsen der Vue-Methode zum Hinzufügen und Löschen von Elementen-js-Tutorial-php.cn

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

不言

Freigeben： 2018-06-30 16:17:37

Original

3159 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!