집 > 기사 > 웹 프론트엔드 > vue의 요소 추가 및 삭제 방법 구문 분석

vue의 요소 추가 및 삭제 방법 구문 분석

不言원래의: 2018-06-30 16:17:373173검색

이 글은 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>

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 웹사이트!

vue의 요소 추가 및 삭제 방법 구문 분석

관련 기사