关于vue.js数组的变异方法

来源：汇意旅游网

本篇文章给大家分享了vue.js数组的变异方法的相关内容，有兴趣的朋友跟着学习参考下。

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

都有什么功能？动手试验了一下：

<body>
 <p id="app">
 <p>
 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>
 </p>
 <p>
 pop方法：
 <input type="button" value="测试功能" @click="methodByPop">
 <ul>
 <li v-for="item of items">
 <span v-text="item"></span>
 </li>
 </ul>
 </p>
 <p>
 shift方法：
 <input type="button" value="测试功能" @click="methodByShift">
 <ul>
 <li v-for="item of items">
 <span v-text="item"></span>
 </li>
 </ul>
 </p>
 <p>
 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>
 </p>
 <p>
 splice方法：
 <input type="button" value="测试功能" @click="methodBySplice">
 <ul>
 <li v-for="item of items">
 <span v-text="item"></span>
 </li>
 </ul>
 </p>
 <p>
 sort方法：
 <input type="button" value="测试功能" @click="methodBySort">
 <ul>
 <li v-for="item of items">
 <span v-text="item"></span>
 </li>
 </ul>
 </p> 
 <p>
 reverse方法：
 <input type="button" value="测试功能" @click="methodByReverse">
 <ul>
 <li v-for="item of items">
 <span v-text="item"></span>
 </li>
 </ul>
 </p>
 result显示的地方：<br>
 <span v-text="result"></span>
 </p>

<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没学好，正好趁这次把这些方法的用法都给捡回来！

显示全文

全部栏目

关于vue.js数组的变异方法