Vue.js forloop
範例一：1~10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>5 forloop</title>
</head>
<body>
<div id="app">
<span v-for="n in 10">{{ n }}</span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<script>
new Vue({
el:'#app'
});
</script>
</body>
</html>範例二：99乘法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>5 forloop</title>
</head>
<body>
<div id="app">
<div v-for="i in 9">
<h3>{{ i }}</h3>
<div v-for="j in 9">{{ i }} x {{ j }}={{ i*j }}</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<script>
new Vue({
el:'#app'
});
</script>
</body>
</html>範例三：使用迴圈輸出data表單
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>5 forloop</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
items: [
{ message: 'Apple' },
{ message: 'banana' },
{ message: 'Coconut' }
]
}
});
</script>
</body>
</html>範例四：使用迴圈輸出data表單2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>5 forloop</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data: {
parentMessage: '台北市',
items: [
{ message: '中正區' },
{ message: '中山區' },
{ message: '大同區' }
]
}
});
</script>
</body>
</html>參考：［教學］Vue js快速上手（六）一定要懂for loop | YOTTA友讀——陪你成長的學習夥伴｜跨領域線上學習平台 (yottau.com.tw)