v-for 指令

我原本希望是在講完v-on之後寫v-for，可是v-on已經提到methods，我覺得不一起講computed和watch的話好像更不連貫，所以我決定不拘泥於指令的類別上，將v-for獨立一篇寫在後頭。

v-for可以對陣列或物件的元素進行循環，將元素渲染在頁面上，概念類似原生javascript的for迴圈。

今天我們友好商店一樣以精靈球銷售為例子。

陣列

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

var vm = new Vue({
  el: '#app',
  data: {
    balls: ['精靈球', '超級球', '高級球']
  },
})

v-for後方接著固定形式的特殊语法，必定是"OOO in XXX"的格式，通常最基本通用、無特殊目的的預設寫法是"item in items"。以"item in items"來說，items會去抓取data內同樣名為items的陣列，然後把items陣列內的個別元素的值取出，各個給予item的別名。然後決定渲染的格式，例如最簡單的就是直接在v-for指令內的寫下{{ item }}，那這樣items內的所有元素就會依序渲染在頁面上。

回到友好商店的例子也是一樣。開心的話其實也可以寫成v-for="item in balls"然後<li>裡面寫{{ item }}，是可行的，但也是可閱讀性的問題，如有必要再調整別名。

物件

v-for也可以套用在物件上，不變更item in items特殊語法，他只會取物件內的值（value），不會取鍵或索引。

<div id="app2">
  <ul>
    <li v-for="ball in pokeball">
      {{ ball }}
    </li>
  </ul>
</div>

var vm = new Vue({
  el: '#app2',
  data: {
    pokeball: {
      name: '精靈球',
      price: 200,
      description: '用於投向野生寶可夢並將其捕捉的球。它是膠囊樣式的。'
    }
  },
})

但其實他不止可以取得值（value），還可以取得物件裡的鍵（key）與索引（index）。只要將原本item in items的特殊語法，更改成(value, key, index) in items，data內items記得寫成物件即可。如果沒有用到index，是可以省略的。value, key 跟 index 都可以取自己需要的別名代替，別名會依據逗號的次序分別被認為是value, key 跟 index。

<div id="app3">
  <ul>
    <li v-for="(price, ball, index) in balls">
      {{ index + 1 }} - {{ ball }} - ${{ price }}
    </li>
  </ul>
</div>

var vm = new Vue({
  el: '#app3',
  data: {
    balls: {
      '精靈球': 200,
      '超級球': 600,
      '高級球': 1200
    }    
  },
})

最後是其實items參數也可以傳入數值，做一個計數器。

<div id="app4">
  <ul>
    <li v-for=" num in 3">
      {{ num }}
    </li>
  </ul>
</div>

var vm = new Vue({
  el: '#app4'
})

今天的codepen在這裡，此文諸多不周到的地方還請各方大大多多包涵指教。