昨天講完了「雙向綁定」，大家因該還記得有提到陣列v-for吧？它也是非常常用的基本語法喔！
先來寫個簡單的範例吧！我們用<ul><li>來寫一組共5人的名單，過去身為設計的我們，在寫靜態頁時一定是這樣寫的吧？

<template>
  <div id="app">
    <ul>
      <li>Adam</li>
      <li>Jack</li>
      <li>Candy</li>
      <li>Louis</li>
      <li>Larry</li>
    </ul>
  </div>
</template>

那如果改用v-for串資料呢？會是如何？

v-for實做

<template>
  <div id="app">
    <ul>
      <li v-for="(item, index) in member" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        member:['Adam','Jack','Candy','Louis','Lurry']
      }
    }
  }
</script>

範例解說

上面寫的這些是什麼意思呢？讓我來說明一下：
我們先寫一組<ul><li>結構出來，並使用v-for="(item, index) in member"綁在<ul>上！

• member：是我們在下方data()裡為資料陣列取的名子，item in是指在(in)member陣列裡的「單筆」資料，我把它取名叫item！換句話說就是<ul>裡面有綁了5筆item，這些item放在member裡面。
• key：因為我們有好幾筆資料，程式會希望我們為各筆資料下key，好讓它分辦誰是誰，而目前我們只是單純的資料顯示，所以就直接拿index做key區分囉！

不知大家有沒有注意到key前加的:號？這是什麼？
其實它是v-bind的簡寫，所以原來完整的寫法是v-bind:key="item"而為了增加編寫的效率，一般都會用簡寫。
那v-bind是什麼？它是屬性綁定的意思！以上面的範例來說就是：「屬性key要帶入資料item」，不熟沒關系，下次講到還會再提一次。

接著再來看data：
我們寫了一組陣列取名叫member，陣列的寫法是要用[]包起(所以之後如果看見[]那就代表它裡面是一組陣列)，陣列裡每個項目都是一個item(記得後面還有內容時，要加,)。

當然還要跟它說名子資料放在哪了！我們要放在<li>裡，所以就像之前教的，用{{}}將資料綁入！

一樣不難對吧！而且你資料寫了幾組，它就自動長幾組<li>出來，如下圖：

v-for多筆資料實做

那如果我們還要在名子下面加入其它資料呢？比如說每個人的email，這一樣很簡單的！就直接加上去吧！

<template>
  <div id="app">
    <ul>
      <li v-for="(item, index) in member" :key="index">{{ item.name }}<br />{{ item.mail }}</li>
    </ul>
  </div>
</template>

接著在資料中寫入(老樣子，一樣記得寫,號喔)：

<script>
  export default {
    name: 'app',
    data() {
      return {
        member:[
          {
            name:'Adam',
            mail:'adam@xxx.com'
          },
          {
            name:'Jack',
            mail:'jack@xxx.com'
          },
          {
            name:'Candy',
            mail:'candy@xxx.com'
          },
          {
            name:'Louis',
            mail:'loui@xxx.com'
          },
          {
            name:'Lurry',
            mail:'lurry@xxx.com'
          }
        ]
      }
    }
  }
</script>

這次每個item有兩筆資料，所以我用{}包起一組資料，包起後它就成為了一個「物件」，當然一個物件就是一個item，item裡面有名字及mail的資料，我直接取名叫name和mail！最後分別綁入<li>裡，如{{ item.name }}就是指在item(物件)裡面的name(資料)。
完成，你會看到像下圖一樣！

好簡單對吧！維護起來也方便，改個資料就好！！而且現在範例是非常簡單的結構，如果<li>內還有更多層結構，你就不用像過去寫靜態頁一樣，複製一大堆相同的結構啦！

select與v-for實做

那昨天講「雙向綁定」時提到的select該怎麼寫？其實一樣囉！

<template>
  <div id="app">
    <select v-model="myName">
        <option v-for="(item, index) in member" :key="index">{{ item }}</option>
    </select>
    <p>我的名子叫：{{ myName }}</p>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        myName:'請選擇姓名',
        member:['Adam','Jack','Candy','Louis','Lurry']
      }
    }
  }
</script>

完成！很容易吧！v-model忘記的話可以回頭看一下( https://ithelp.ithome.com.tw/articles/10201973 )。