欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

详解vue添加删除元素的方法

程序员文章站 2022-03-21 20:35:26
相关版实例代码如下:

相关版实例代码如下:

<!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>
  <div id="app">
    <div class="form-group">
      <label>name:</label>
      <input type="text" name="" v-model='newitems.name'>
    </div>
    <div class="form-group">
      <label>age:</label>
      <input type="text" name="" v-model='newitems.age'>
    </div>
    <div class="form-group">
      <label>sex:</label>
      <select v-model='newitems.sex'>
        <option value="男">男</option>
        <option value="女">女</option>
      </select>

    </div>
    <div class="form-group">
      <label></label>
      <button v-on:click = 'addperson'>create</button>
    </div>

    <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>
  </div>

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

大家可以测试以下,感谢大家对的支持。