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

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

程序员文章站 2022-03-31 15:35:46
...
本篇文章给大家分享了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='newitems.name'>
    </p>
    <p class="form-group">
      <label>age:</label>
      <input type="text" name="" v-model='newitems.age'>
    </p>
    <p class="form-group">
      <label>sex:</label>
      <select v-model='newitems.sex'>
        <option value="男">男</option>
        <option value="女">女</option>
      </select>

    </p>
    <p class="form-group">
      <label></label>
      <button v-on:click = 'addPerson'>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:'#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>

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

关于vue.js数组的变异方法

关于vue检测对象和数组的变化分析

以上就是解析vue添加删除元素的方法的详细内容,更多请关注其它相关文章!

相关标签: vue 添加 删除