比如某些数据需要按照一定的顺序全部展示出来，但是后端接口返回的数据中只包含其中的一部分可能是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>