vue使用splice()刪除數(shù)組中的一個(gè)數(shù)據(jù) 彈出窗口提示問(wèn)題

更新時(shí)間：2023年07月03日 09:14:45 作者：大可大可抖

這篇文章主要介紹了vue使用splice()刪除數(shù)組中的一個(gè)數(shù)據(jù) 彈出窗口提示問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

使用splice()刪除數(shù)組中的一個(gè)數(shù)據(jù) 彈出窗口提示

1. 循環(huán)輸出數(shù)組時(shí) v-for="(item,index) in list" //需要獲取當(dāng)前下標(biāo),item

2. 點(diǎn)擊刪除按鈕傳一個(gè)參數(shù) ，在這個(gè)彈窗口方法中獲取到這個(gè)參數(shù)。在data中設(shè)置一個(gè)空置，把參數(shù)賦給這個(gè)值。

3. 彈窗中點(diǎn)擊刪除按鈕這個(gè)數(shù)組.splice(獲取到的下標(biāo)值，1)；

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

語(yǔ)法結(jié)構(gòu)：splice(index,len,[item])

1、可以用來(lái)添加/刪除/替換數(shù)組內(nèi)某一個(gè)或者幾個(gè)值

2、該方法會(huì)改變?cè)紨?shù)組

index:數(shù)組開(kāi)始下標(biāo)
len: 替換/刪除的長(zhǎng)度
item:替換的值，刪除操作的話 item為空

刪除

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

<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>
<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，因?yàn)閐elete是系統(tǒng)關(guān)鍵字）
? ? ? del(index) {
? ? ? ? this.persons.splice(index, 1)?
? ? ? }
? ? }
? })
</script>

替換（修改）

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

<div id="demo">
? <h2>測(cè)試: 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長(zhǎng)度也設(shè)置為0，item傳入要添加的對(duì)象

<div id="demo">
? <h2>測(cè)試: 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ù)便可以重新渲染頁(yè)面。而隱藏在背后的原理便是其高效的Diff算法。vue和react的虛擬DOM的Diff算法大致相同，其核心是基于兩個(gè)簡(jiǎn)單的假設(shè)：