Vue.js教程（四）：v-for迴圈操作
阿新 • • 發佈：2018-12-21
前言
本篇主要是Vue的迴圈操作，需要遍歷陣列。所以本篇嚴格來說有兩個知識點：
1、v-for迴圈使用
2、vue中陣列的定義
v-for基本使用
1、定義陣列
<script type="text/javascript"> var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: '學習 JavaScript' }, { text: '學習 Vue' }, { text: '整個牛專案' } ] } }) </script>
如上todos是一個數組，更準確的說是一個json陣列。
2、v-for遍歷陣列
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
說明：todos是json陣列，todo是陣列的一個item。todo.text取到的就是{ text: ‘學習 Vue’ }中的text這個key對應的值。
完整程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>陣列</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div> <script type="text/javascript"> var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: ’Java學習 JavaScript' }, { text: '千鋒Java學習 Vue' }, { text: '整個牛專案' } ] } }) </script> </body> </html>
學習前端最好的方式就是動手用一用，效果出來了就明白了。