今天閱讀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()? 將數組倒序，成功則返回倒序后的數組

總結

以上是生活随笔為你收集整理的vue.js框架：数组的各种变异方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。