1、數據方法分類：
（1）原數組改變
push
pop
unshift
shift
reverse
sort
splice
（2）原數組未變，生成新數組
slice
concat
filter
對于使原數組變化的方法，可以直接更新視圖。
對于原數組未變的方法，可以使用新數組替換原來的數組，以使視圖發生變化。
示例代碼：
<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <title>vue示例</title> </head> <body> <div id="app"> <ul> <template v-for="book in books"> <li>書名：{{book.name}}</li> <li>作者：{{book.author}}</li> </template> </ul> </div> <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { books: [{ name: 'vuejs', author: 'a' }, { name: 'js高級', author: 'b' }, { name: 'java', author: 'c' } ] } }); //直接可以使得視圖改變 //app.books.push({name: 'c++',author: 'd'}); //需要更新原數組 app.books = app.books.concat([{name: 'c++',author: 'd'}]); </script> </body></html>注意：以下不會觸發視圖的更新。
（1）通過索引直接設置項。
（2）修改數組長度，app.books.length=1。
若不想改變原數組，可以使用計算屬性來過濾數組，如：
<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <title>vue示例</title> </head> <body> <div id="app"> <ul> <template v-for="book in filterBooks"> <li>書名：{{book.name}}</li> <li>作者：{{book.author}}</li> </template> </ul> </div> <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { books: [{ name: 'vuejs', author: 'a' }, { name: 'js高級111', author: 'b' }, { name: 'java33333', author: 'c' } ] }, computed:{ filterBooks:function(){ return this.books.sort(function(a,b){ return a.name.length>b.name.length?1:-1 }) } } }); </script> </body></html>
新聞熱點
疑難解答
圖片精選
