1、數據方法分類： （1）原數組改變 push pop unshift shift reverse sort splice （2）原數組未變，生成新數組 slice concat filter 對於使原數組變化的方法，可以直接更新視圖。 對於原數組未變的方法，可以使用新數組替換原來的數組，以使視圖發 ...
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>
上述代碼是按照書的名字由短到長排序。這個不會修改原數組。
