比如某些數據需要按照一定的順序全部展示出來，但是后端接口返回的數據中只包含其中的一部分可能是2個也可能是3個，這個時候需要優先展示接口中的數據，然后剩余的按照原來默認的順序進行展示。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> .menu { border: #000000 solid 1px; height: 100px; width: 100px; display: inline-block; } .red { background-color: red; } </style> </head> <body> <div id="app"> <ul> <!-- 先展示返回來的數據，再展示沒有返回來的數據即可 --> <li v-for="item in interfaceMenu" class="menu red"> {{item.name}} </li> <li v-for="item in list" class="menu"> {{item.name}} </li> </ul> <input type="button" value="按鈕" @click="renderData" /> </div> <script> var app = new Vue({ el: "#app", data: { // muenList是所有的數據，並按照順序排列 // interfaceMenu是后端返回來的數據 // list用於按照順序存儲沒有被返回的數據 menuList: [ { id: 1, name: "1", flag: false }, { id: 2, name: "2", flag: false }, { id: 3, name: "3", flag: false }, { id: 4, name: "4", flag: false }, { id: 5, name: "5", flag: false }, ], interfaceMenu: [{ id: 2, name: "2" }, { id: 4, name: "4" }], list: [], }, methods: { // 對比全部列表數據和返回來的數據，然后沒有在返回接口內的數據添加到list新列表中 renderData: function () { let map = {} this.interfaceMenu.forEach(row => { map[row.id] = row }) for (var i = 0; i < this.menuList.length; i++) { if (!map.hasOwnProperty(this.menuList[i].id)) { this.list.push(this.menuList[i]) } } console.log(this._uid) // 排序 如果本身列表沒有排序的話，可以采用下面的方法 進行升序或者倒序的排列 // this.list.sort((a,b)=>a.id-b.id) // this.interfaceMenu.sort((a,b)=>a.id-b.id) } } }) </script> </body> </html>