快捷導(dǎo)航

Vue中splice()方法對數(shù)組進(jìn)行增刪改等操作的實(shí)現(xiàn)

更新時(shí)間：2023年05月18日 09:05:15 作者：李長庚

vue中對數(shù)組的元素進(jìn)行刪除,以前一直以為這個(gè)方法是vue中特有的,后來百度之后才知道原來是js的一個(gè)寫法,下面這篇文章主要給大家介紹了關(guān)于Vue中splice()方法對數(shù)組進(jìn)行增刪改等操作的實(shí)現(xiàn)方法,需要的朋友可以參考下

一、刪除：

index表示要?jiǎng)h除的數(shù)組下標(biāo)， len長度為1（len設(shè)置1，如果為0，則數(shù)組不變），item為空表示執(zhí)行刪除操作

<template>
<div id="demo">
  <h2>v-for 遍歷數(shù)組</h2>
  <ul>
    <li v-for="(item, index) in persons" :key="index">
	      序號(hào)：{{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，因?yàn)閐elete是系統(tǒng)關(guān)鍵字）
      del(index) {
        this.persons.splice(index, 1) 
      }
  }
}
</script>
<style>
</style>

二、替換（修改）：

相當(dāng)于是先刪除，再添加

<div id="demo">
  <h2>測試: v-for 遍歷數(shù)組</h2>
  <ul>
    <li v-for="(item, index) in persons" :key="index">
	      序號(hào)：{{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下標(biāo)直接設(shè)置為0，len長度也設(shè)置為0，item傳入要添加的對象

<div id="demo">
  <h2>測試: v-for 遍歷數(shù)組</h2>
  <ul>
    <li v-for="(item, index) in persons" :key="index">
	      序號(hào)：{{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>

附加知識(shí)點(diǎn)：

在v-for遍歷中，都需要聲明：key，那么:key的作用是什么呢？

答：vue和react都實(shí)現(xiàn)了一套虛擬DOM，使我們可以不直接操作DOM元素，只操作數(shù)據(jù)便可以重新渲染頁面。而隱藏在背后的原理便是其高效的Diff算法。vue和react的虛擬DOM的Diff算法大致相同，其核心是基于兩個(gè)簡單的假設(shè)：

假設(shè)1、兩個(gè)相同的組件產(chǎn)生類似的DOM結(jié)構(gòu)，不同的組件產(chǎn)生不同的DOM結(jié)構(gòu)。

假設(shè)2、同一層級(jí)的一組節(jié)點(diǎn)，他們可以通過唯一的id進(jìn)行區(qū)分。

簡單的說， :key的作用主要是為了高效的更新虛擬DOM

總結(jié)

到此這篇關(guān)于Vue中splice()方法對數(shù)組進(jìn)行增刪改等操作實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue splice()對數(shù)組增刪改內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: