Analyse de la méthode de vue pour ajouter et supprimer des éléments-js tutoriel-php.cn

Analyse de la méthode de vue pour ajouter et supprimer des éléments

不言

Libérer： 2018-06-30 16:17:37

original

3158 Les gens l'ont consulté

Cet article partage avec vous la méthode d'ajout et de suppression d'éléments dans Vue et des exemples de codes associés. Les amis intéressés peuvent s'y référer.

L'exemple de code de version pertinent est le suivant :

<!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>

Copier après la connexion

Ce qui précède représente l'intégralité du contenu de cet article. J'espère que ce sera le cas. être utile à l'étude de chacun. Plus Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de la méthode de mutation du tableau vue.js

À propos de l'analyse des modifications des objets de détection de vue et tableaux

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!