vue.js学习笔记之数组的变异方法
今天阅读vue官网的guide（https://vuefe.cn/v2/guide/list.html），看到一个观察数组的变异方法。编译方法？？？excuse me??什么东西？？guide就给了这么一堆东西：Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：push()pop()shift()unshift()splice()sort()reve
·
今天阅读vue官网的guide（https://vuefe.cn/v2/guide/list.html），看到一个观察数组的变异方法。编译方法？？？excuse me??什么东西？？guide就给了这么一堆东西：
Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：
push()pop()shift()unshift()splice()sort()reverse()
<body>
<div id="app">
<div>
push方法：
<input type="text" v-model="text" @keyup.enter="methodByPush">
<input type="button" value="测试功能" @click="methodByPush">
<ul>
<li v-for="item of items">
<span v-text="item"></span>
</li>
</ul>
</div>
<div>
pop方法：
<input type="button" value="测试功能" @click="methodByPop">
<ul>
<li v-for="item of items">
<span v-text="item"></span>
</li>
</ul>
</div>
<div>
shift方法：
<input type="button" value="测试功能" @click="methodByShift">
<ul>
<li v-for="item of items">
<span v-text="item"></span>
</li>
</ul>
</div>
<div>
unshift方法：
<input type="text" v-model="text" @keyup.enter="methodByUnshift">
<input type="button" value="测试功能" @click="methodByUnshift">
<ul>
<li v-for="item of items">
<span v-text="item"></span>
</li>
</ul>
</div>
<div>
splice方法：
<input type="button" value="测试功能" @click="methodBySplice">
<ul>
<li v-for="item of items">
<span v-text="item"></span>
</li>
</ul>
</div>
<div>
sort方法：
<input type="button" value="测试功能" @click="methodBySort">
<ul>
<li v-for="item of items">
<span v-text="item"></span>
</li>
</ul>
</div>
<div>
reverse方法：
<input type="button" value="测试功能" @click="methodByReverse">
<ul>
<li v-for="item of items">
<span v-text="item"></span>
</li>
</ul>
</div>
result显示的地方：<br>
<span v-text="result"></span>
</div><script>
var vm = new Vue({
el: '#app',
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()
alert(this.result)
}
}
})
</script>得到下面的结论：
push() 往数组最后面添加一个元素，成功返回当前数组的长度
pop() 删除数组的最后一个元素，成功返回删除元素的值
shift() 删除数组的第一个元素，成功返回删除元素的值
unshift() 往数组最前面添加一个元素，成功返回当前数组的长度
splice() 有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除
后想要在原位置替换的值（可选）
sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组
reverse() 将数组倒序，成功返回倒序后的数组
后来发现这些应该都是javascript本来的方法吧？以前javascript没学好，正好趁这次把这些方法的用法都给捡回来！
记录一下。
前往低代码交流专区
更多推荐
5
0- 0
已为社区贡献5条内容
所有评论(0)