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

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

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

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

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

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

3. 彈窗中點擊刪除按鈕這個數(shù)組.splice(獲取到的下標值，1)；

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

語法結構：splice(index,len,[item])

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

2、該方法會改變原始數(shù)組

index:數(shù)組開始下標
len: 替換/刪除的長度
item:替換的值，刪除操作的話 item為空

刪除

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

<div id="demo">
? <h2>v-for 遍歷數(shù)組</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是系統(tǒng)關鍵字）
? ? ? del(index) {
? ? ? ? this.persons.splice(index, 1)?
? ? ? }
? ? }
? })
</script>

替換（修改）

相當于是先刪除，再添加

<div id="demo">
? <h2>測試: v-for 遍歷數(shù)組</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 遍歷數(shù)組</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>