语法结构:splice(index,len,[item])
1、可以用来添加/删除/替换数组内某一个或者几个值
2、该方法会改变原始数组
index:数组开始下标

len: 替换/删除的长度

item:替换的值,删除操作的话 item为空

删除:
index表示要删除的数组下标, len长度为1(len设置1,如果为0,则数组不变),item为空表示执行删除操作

<div id="demo">
  <h2>v-for 遍历数组</h2>
  <ul>
    <li v-for="(item, index) in persons" :key="index">
	      序号:{{index}}
	      名字:{{item.name}}
	      年龄:{{item.age}}
     <button @click="del(index)">删除</button>
    </li>
  </ul>
</div>
 
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      persons: [
        {name: 'Tom', age:18},
        {name: 'Jack', age:17},
        {name: 'Bob', age:19},
        {name: 'Mary', age:16}
      ]
    },
    methods: {
      //删除(注意:删除的方法名不能用delete,因为delete是系统关键字)
      del(index) {
        this.persons.splice(index, 1) 
      }
    }
  })
</script>
Logo

前往低代码交流专区

更多推荐