渲染數據時，有時候往往需要把最新的那條數據放在最上面，最簡單的方法就是在渲染之前把數據先倒序排列好，再渲染到網頁上。 這時就要用到reverse()。
排序：sort()方法 和反轉：reverse() 方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中的變異方法：排序：sort()方法 和反轉：reverse() 方法</title> <script type="text/javascript" src="vue.js"></script> </head> <body> <div id="demo"> <li v-for="(v,k) in comments"> {{v.id}}——{{v.content}} <button v-on:click="remove(k)">刪除</button> </li> <textarea rows="10" cols="20" v-model="current"></textarea><br/> <button v-on:click="push('first')">在數據前面增加</button> <button v-on:click="push('last')">在數據后面增加</button> <br> <button v-on:click="del('first')">刪除第一個數據</button> <button v-on:click="del('last')">刪除最后一個數據</button> <br> <button v-on:click="sort">降序排序</button> <br> <button v-on:click="reverse">數據反轉</button> <br> <button v-on:click="alldel">刪除所有數據</button> </div> <script type="text/javascript"> new Vue({ el:"#demo", data:{ current:"", comments:[ {id:1,content:'JAVA'}, {id:0,content:'PHP'}, {id:3,content:'HTML'}, {id:2,content:'CSS'} ] }, methods:{ //刪除所有數據的方法： alldel(){ this.comments=[]; }, //倒序排序的方法： sort(){ this.comments.sort((a,b)=>{ return a.id<b.id; }); }, //反轉數據： reverse(){ this.comments.reverse(); }, //增加數據的方法： push(type){ var id=this.comments.length; var content={id:id,content:this.current}; switch (type){ case 'first': this.comments.unshift(content); break; case 'last': this.comments.push(content); break; } this.current=""; }, //刪除數據的方法： del(type){ switch (type){ case 'first': this.comments.shift(); break; case 'last': this.comments.pop(); break; } }, //點擊刪除，刪除對應的數據信息： remove(k){ this.comments.splice(k,1); } } }); </script> </body> </html>