Syntax structure: splice(index,len,[item])
1. It can be used to add/delete/replace a certain value or several values in the array
2. This method will change the original array
- index: The array starts to index
- len: length of replacement/delete
- item: Replace the value, if the delete operation, the item is empty
1. Delete:
index indicates the array index to be deleted, the length of len is 1 (len is set to 1, if 0, the array remains unchanged), and the item is empty means that the delete operation is performed
<template>
<div >
<h2>v-for Iterate through the array</h2>
<ul>
<li v-for="(item, index) in persons" :key="index">
Serial number：{{index}}
name：{{}}
age：{{}}
<button @click="del(index)">delete</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 (Note: delete cannot be used as delete because delete is the system keyword) del(index) {
(index, 1)
}
}
}
</script>
<style>
</style>2. Replace (modify):
It's equivalent to deleting it first and then adding it
<div >
<h2>test: v-for Iterate through the array</h2>
<ul>
<li v-for="(item, index) in persons" :key="index">
Serial number：{{index}}
name：{{}}
age：{{}}
<button @click="update(index, {name:'Zhang San', age: 16})">renew</button>
</li>
</ul>
</div>
<script type="text/javascript" src="../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: {
//Revise update(index, item) {
(index, 1, item)
}
}
})
</script>3. Add:
Index index index is set to 0 directly, the len length is also set to 0, and the item passes in the object to be added
<div >
<h2>test: v-for Iterate through the array</h2>
<ul>
<li v-for="(item, index) in persons" :key="index">
Serial number：{{index}}
name：{{}}
age：{{}}
</li>
</ul>
<button @click="add({name: 'Li Si', age: 18})">Add to</button>
</div>
<script type="text/javascript" src="../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 to add (item) {
(0, 0, item)
}
}
})
</script>Additional knowledge points:
In v-for traversal, you need to declare: key, so what is the function of: key?
Answer: Both vue and react implement a set of virtual DOMs, so that we can re-render the page without directly manipulating DOM elements and just manipulating data. The principle hidden behind it is its efficient Diff algorithm. The Diff algorithms of virtual DOM of vue and react are roughly the same, and the core is based on two simple assumptions:
Suppose 1. Two identical components produce similar DOM structures, and different components produce different DOM structures.
Suppose 2. A set of nodes at the same level can be distinguished by a unique id.
Simply put, the function of :key is mainly to efficiently update the virtual DOM.
Summarize
This is the article about the implementation of the splice() method in Vue to add, delete and modify arrays. For more related Vue splice() to add, delete and modify arrays, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!