列表渲染

在 Vue 中，我們會使用 v-for 來迭代陣列中的元素。
下方我先在 Vue 的應用程式中建立一個陣列為 list ：

new Vue({
  el: '#app',
  data: {
      list: [
        {
          name: 'Ming',
          age: 18
        },
        {
          name: 'John',
          age: 26
        },
        {
          name: 'Derren',
          age: 22
        }
    ]
  },
})

接下來可以利用 v-for 來將陣列中的元素依序顯示在頁面上，用法如下：

<div id="app">
  <ul>
    <li v-for="item in list">
      {{item.name}} 今年 {{item.age}} 歲。
    </li>
  </ul>
</div>

讓我來說明一下，上面的 item 是自定義的變數，而陣列內各元素中的各屬性的值則是使用 {{ item.name }} 這種方式來取出來，是不是和我們在 JavaScript 中取出物件屬性的值的方法一樣，只要在左右兩邊再加上 {{ }} 就行囉！

如果想取得陣列中的索引值，可以這麼做：

<div id="app">
  <ul>
    <li v-for="(item, index) in list">
      {{index}} - {{item.name}} 今年 {{item.age}} 歲。
    </li>
  </ul>
</div>

index 在這裡是索引值，如果沒有需要用到的話是可以省略的。而 v-for 還可以直接帶入常數，像這樣：

<div id="app">
  <ul>
    <li v-for="item in 10">
      {{item}}
    </li>
  </ul>
</div>

是不是方便許多也非常簡單呢？

那麼，明天再見囉！