當HTML有一些重複的元素，清單或下拉選單等等的，可以使用v-for語法來把陣列或物件的資料render出來：

用v-for把陣列轉成元素

先用陣列定義一組todo的資料：吃飯、睡覺、打東東：

//js
  <script>
    new Vue({
      el: "#app",
      data: {
        todo: [
          '吃飯',
          '睡覺',
          '打東東'
        ]
      }
    });
  </script>

<!--html-->
<div id="app">
    <div id="app">
      <ol>
        <li v-for="item in todo">{{item}}</li>
      </ol>
    </div>
  </div>

使用v-for="item in todo"，意思是抓取todo陣列的元素，把這個元素指定為item，並使用{{item}}將值render出來。

最後得到的結果：

<div id="app">
    <div id="app">
        <ol>
            <li>吃飯</li>
            <li>睡覺</li>
            <li>打東東</li>
      </ol>
  </div>
</div>

除了render 陣列的值之外，還能帶index的參數去取得陣列元素的index，把上面的語法改一下：

<li v-for="(item, index) in todo" v-bind:title="(index + 1 )+ item">{{item}}</li>

最後得到的結果：

<div id="app">
  <ol>
      <li title="1吃飯">吃飯</li>
      <li title="2睡覺">睡覺</li>
      <li title="3打東東">打東東</li>
  </ol>
</div>

括號裡第一個變數代表的是array的 value，第二個是index，所以變數想叫什麼名字就自己決定囉。

用v-for把物件轉為元素

先訂一組名為todo的物件：

//js
  <script>
    new Vue({
      el: "#app",
      data: {
        todo: {
          morning: '吃飯',
          evening: '睡覺',
          night: '打東東'
        }
      }
    });
  </script>

用法與輸出結果就和陣列一樣：

<!--html-->
<div id="app">
    <div id="app">
      <ol>
        <li v-for="item in todo">{{item}}</li>
      </ol>
    </div>
  </div>

<div id="app">
    <div id="app">
        <ol>
            <li>吃飯</li>
            <li>睡覺</li>
            <li>打東東</li>
      </ol>
  </div>
</div>

如果想要讓元素帶入物件的key值的話，與陣列一樣在item後帶入另一個變數，第二個變數代表的是key值：

<li v-for="(item, key) in todo">{{key}} + {{item}}</li>

迴圈先紀錄到這裡，之後有新學什麼再做補充XD