首頁 >web前端 >js教程 >解析vue新增刪除元素的方法

解析vue新增刪除元素的方法

不言原創: 2018-06-30 16:17:373181瀏覽

這篇文章跟大家分享了vue新增刪除元素的方法以及相關實例程式碼，有興趣的朋友參考一下。

相關版實例程式碼如下：

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

#以上就是本文的全部內容，希望對大家的學習有所幫助，更相關內容請關注PHP中文網！

解析vue新增刪除元素的方法

相關文章