v-for循環：
語法就是`變量 in 需要循環的變量名`。
1. 數組循環：`<tr v-for="book in books">`，如果在循環的時候想要把下標也循環出來，那么可以加一個圓括號，並且永遠記住，第一個值是對象，第二個才是下標，不管這個名字叫做什么。
2. 對象循環：跟數組循環是一樣的。默認循環出來的是值，如果想要循環`key`和`value`，那么加一個圓括號。
3.保持狀態：循環出來的元素，如果沒有使用key元素來唯一標識，如果后期的數據發生了更改，默認是會重用的，並且元素的順序不會跟着數據的順序更改而更改。
默認情況下，如果數組中的順序發生變化，或者個數發生變化導致重新渲染，那么vue會重新利用之前的元素，而不會重新排序，這樣在某些情況下可能是想要的。但是大部分情況可能不是我們想要的，這時候可以添加`key`屬性。`key`只能夠是number和string類型，那么在循環的時候一般使用循環出來的對象的某個唯一的值，不要使用index來作為key，雖然用了，但是沒有效果。在vue2.2.x以上，在自定義組件上使用v-for，key是必須要寫的。
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<script src='../vue.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<table>
<thead>
<tr>
<th>序號</th>
<th>標題</th>
<th>作者</th>
</tr>
</thead>
<tbody>
<tr v-for="(book, index) in books">
<td>{{ index+1 }}</td>
<td>{{ book.title }}</td>
<td>{{ book.author }}</td>
</tr>
</tbody>
</table> -->
<div v-for="(value, key) in person"> <!-- 順序永遠為：(對象, 下標值) -->
{{ key }}: {{ value }}
</div>
<div v-for="(book,index) in books" :key="book.title"><!-- 使用key過后，輸入框中的值會綁定給輸入框 -->
<label>標題：</label>
<input type="text" :placeholder="book.title">
</div>
<button @click="changeBookSort">點擊更改圖書順序</button>
</div>
<script>
new Vue({
el: '#app',
methods: {
changeBookSort(){
this.books.sort(function (a, b) {
return Math.random(0,1) - 0.5 // 取一個隨機的浮點數，大於0時為true，小於0時為false
})
}
},
data: {
books: [{
'title': '三國演義',
'author': '羅貫中'
},{
'title': '水滸傳',
'author': '施耐庵'
},{
'title': '西游記',
'author': '吳承恩'
},{
'title': '紅樓夢',
'author': '曹雪芹'
}],
person: {
// 鍵值對
"username": "百度",
"age": 18,
"homepage": "https://www.baidu.com/"
}
}
})
</script>
</body>
</html>