0


Vue中splice()方法:实现对数组进行增删改的操作

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

len: 替换/删除的长度

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

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

<template>
  
<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>
</template>
 
<script>
export default {
  data(){
    return{
        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>
 
<style>
 
</style>

二、替换(修改):

相当于是先删除,再添加

<div id="demo">
  <h2>测试: v-for 遍历数组</h2>
  <ul>
    <li v-for="(item, index) in persons" :key="index">
          序号:{{index}}
          名字:{{item.name}}
          年龄:{{item.age}}
     <button @click="update(index, {name:'张三', age: 16})">更新</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: {
      //修改
      update(index, item) {
        this.persons.splice(index, 1, item)
      }
    }
  })
</script>

三、添加:

index下标直接设置为0,len长度也设置为0,item传入要添加的对象

<div id="demo">
  <h2>测试: v-for 遍历数组</h2>
  <ul>
    <li v-for="(item, index) in persons" :key="index">
          序号:{{index}}
          名字:{{item.name}}
          年龄:{{item.age}}
    </li>
  </ul>
  <button @click="add({name: '李四', age: 18})">添加</button>
</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: {
        //添加
        add (item) {
            this.persons.splice(0, 0, item)
        }
    }
  })
</script>

附加知识点:
在v-for遍历中,都需要声明:key,那么:key的作用是什么呢?

答:vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。vue和react的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设:

假设1、 两个相同的组件产生类似的DOM结构,不同的组件产生不同的DOM结构。

假设2、 同一层级的一组节点,他们可以通过唯一的id进行区分。

简单的说, :key的作用主要是为了高效的更新虚拟DOM


本文转载自: https://blog.csdn.net/xybhua/article/details/128508255
版权归原作者 李長庚 所有, 如有侵权,请联系我们删除。

“Vue中splice()方法:实现对数组进行增删改的操作”的评论:

还没有评论