v-for 指令需要以 item in items 形式的特殊語法， items 是源數據數組並且 item 是數組元素迭代的別名。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ol>
<li v-for="site in sites"> {{ site.name }} </li>
</ol>
</div>
<script>
new Vue({ el: '#app', data: { sites: [ { name: 'Runoob' }, { name: 'Google' }, { name: 'Taobao' } ] } }) </script>
</body>
</html>
效果：
v-for 迭代對象
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="value in object"> {{ value }} </li>
</ul>
</div>
<script>
new Vue({ el: '#app', data: { object: { name: '菜鳥教程', url: 'http://www.runoob.com', slogan: '學的不僅是技術，更是夢想！' } } }) </script>
</body>
</html>
效果：
遍歷對象key-value
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(value, key) in object"> {{ key }} : {{ value }} </li>
</ul>
</div>
<script>
new Vue({ el: '#app', data: { object: { name: '菜鳥教程', url: 'http://www.runoob.com', slogan: '學的不僅是技術，更是夢想！' } } }) </script>
</body>
</html>
效果：
遍歷對象key-value 帶索引
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </li>
</ul>
</div>
<script>
new Vue({ el: '#app', data: { object: { name: '菜鳥教程', url: 'http://www.runoob.com', slogan: '學的不僅是技術，更是夢想！' } } }) </script>
</body>
</html>
效果：
v-for 迭代整數
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="n in 10"> {{ n }} </li>
</ul>
</div>
<script>
new Vue({ el: '#app' }) </script>
</body>
</html>
效果：
