今天阅读vue官网的学习教程,看到一个观察数组的变异方法。变异方法???excuse me??什么东西??guide就给了这么一堆东西:
原来这些方法如下:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
Vue 包含的这些方法,它们会主动触发视图的更新(即前端数据会自动更新)。
<!--HTML-->
<!--数组的各种变异方法-->
<div id="arrayChange">
<div> push方法:
<input type="text" v-model="text" @keyup.enter="methodByPush">
<input type="button" value="测试功能" @click="methodByPush">
</div>
<div> pop方法:
<input type="button" value="测试功能" @click="methodByPop">
</div>
<div> shift方法:
<input type="button" value="测试功能" @click="methodByShift">
</div>
<div> unshift方法:
<input type="text" v-model="text" @keyup.enter="methodByUnshift">
<input type="button" value="测试功能" @click="methodByUnshift">
</div>
<div> splice方法:
<input type="button" value="测试功能" @click="methodBySplice">
</div>
<div> sort方法:
<input type="button" value="测试功能" @click="methodBySort">
</div>
<div> reverse方法:
<input type="button" value="测试功能" @click="methodByReverse">
</div>
<div> 测试值:
<ul>
<li v-for="item of items">
<span v-text="item">
</span>
</li>
</ul>
</div>
result显示的地方:<br>
<span v-text="result"></span>
</div>
//JS代码
var vm = new Vue({
el: '#arrayChange',
data: {
items: [],
text: '',
result: ''
},
methods: {
methodByPush: function () {
this.result = this.items.push(this.text)
this.text = ''
},
methodByPop: function () {
this.result = ''
this.result = this.items.pop()
},
methodByShift: function () {
this.result = ''
this.result = this.items.shift()
},
methodByUnshift: function () {
this.result = ''
this.result = this.items.unshift(this.text)
this.text = ''
},
methodBySplice: function () {
this.result = ''
this.result = this.items.splice(2,1,'yovan')
},
methodBySort: function () {
this.result = ''
this.result = this.items.sort()
},
methodByReverse: function () {
this.result = ''
this.result = this.items.reverse()
}
}
})
用法简介:
push() 往数组最后面添加一个元素,成功则返回当前数组的长度
pop() 删除数组的最后一个元素,成功则返回删除元素的值
shift() 删除数组的第一个元素,成功则返回删除元素的值
unshift() 往数组最前面添加一个元素,成功则返回当前数组的长度
splice() 有三个参数,第一个是想要删除的元素的下标(必选),第二个是想要删除的个数(必选),第三个是删除
后想要在原位置替换的值(可选)
sort() 使数组按照字符编码默认从小到大排序,成功则返回排序后的数组
reverse() 将数组倒序,成功则返回倒序后的数组