Vue contains a set of mutated methods to observe arrays, so they will also trigger view updates. These methods are as follows:
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
What functions do they have? Have a hands-on experiment:
<body>
<div >
<div>
pushmethod：
<input type="text" v-model="text" @="methodByPush">
<input type="button" value="Testing Features" @click="methodByPush">
<ul>
<li v-for="item of items">
<span v-text="item"></span>
</li>
</ul>
</div>
<div>
popmethod：
<input type="button" value="Testing Features" @click="methodByPop">
<ul>
<li v-for="item of items">
<span v-text="item"></span>
</li>
</ul>
</div>
<div>
shiftmethod：
<input type="button" value="Testing Features" @click="methodByShift">
<ul>
<li v-for="item of items">
<span v-text="item"></span>
</li>
</ul>
</div>
<div>
unshiftmethod：
<input type="text" v-model="text" @="methodByUnshift">
<input type="button" value="Testing Features" @click="methodByUnshift">
<ul>
<li v-for="item of items">
<span v-text="item"></span>
</li>
</ul>
</div>
<div>
splicemethod：
<input type="button" value="Testing Features" @click="methodBySplice">
<ul>
<li v-for="item of items">
<span v-text="item"></span>
</li>
</ul>
</div>
<div>
sortmethod：
<input type="button" value="Testing Features" @click="methodBySort">
<ul>
<li v-for="item of items">
<span v-text="item"></span>
</li>
</ul>
</div>
<div>
reversemethod：
<input type="button" value="Testing Features" @click="methodByReverse">
<ul>
<li v-for="item of items">
<span v-text="item"></span>
</li>
</ul>
</div>
resultWhere to display：<br>
<span v-text="result"></span>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
items: [],
text: '',
result: ''
},
methods: {
methodByPush: function () {
= ()
= ''
},
methodByPop: function () {
= ''
= ()
},
methodByShift: function () {
= ''
= ()
},
methodByUnshift: function () {
= ''
= ()
= ''
},
methodBySplice: function () {
= ''
= (2,1,'yovan')
},
methodBySort: function () {
= ''
= ()
},
methodByReverse: function () {
= ''
= ()
alert()
}
}
})
</script>
Get the following conclusion:
push() adds an element to the end of the array, successfully returning the length of the current array
pop() deletes the last element of the array and successfully returns the value of the deleted element
shift() deletes the first element of the array and successfully returns the value of the deleted element.
unshift() Add an element to the front of the array and successfully return the length of the current array.
splice() has three parameters. The first is the subscript of the element you want to delete (required), the second is the number of elements you want to delete (required), and the third is the deletion
The value you want to replace in the original position (optional)
sort() makes the array sort from small to large by default according to character encoding, and successfully returns the sorted array.
reverse() returns the array in reverse order and successfully returns the array in reverse order
Later I found out that these should be the original method of javascript, right? I haven't learned JavaScript well before, so I just took advantage of this time to get all the usages of these methods back!