Vue-v-for用法及注意的地方

v-for

這邊的功能就是利用 v-for 來遍歷一個陣列或者一個物件

---HTML---
<div id="app">
  <h1 v-for="(user,index) in userDataArray"> {{ user.name }}</h1>
  <h1 v-for="(value,key) in userDataObj"> {{ key }}</h1>
  <span v-for="num in 10"> {{ key }}</span>  // 呈現 1 - 10 的內容 
</div>

---JavaScript---
let vm = new Vue({
  el: '#app',
  data: {
    userDataArray: [
    {
      name: 'Landy',
      gender: 'male'
    },
    {
      name: 'Sara',
      gender: 'female'
    }
  ],
  userDataObj: {
    Landy: 'male',
    Sara: 'female'
  }
  }
})

以上兩種方式，都可以達到將裡面的內容透過 v-for 呈現在畫面上，不過要注意一下，物件那邊的寫法，key 會呈現該屬性名稱 而 value 會呈現該 key 所夾帶的值。
另外，我們也可以用 v-for 單純去遍歷一個數字

<div v-for="num in 10"> {{ num }} </div>

以上範例就會從 1 到 10 顯示出來，記得這個部分數字會從 1 開始算喔。

Alex 宅幹嘛-眉眉角角

v-for 不要搭配 v-if 來使用

因為，在 Vue 中，v-for 的優先度是高於 v-if 的，這就代表，v-for 會先將目標陣列中的元素全部先渲染出來，然後，才會再執行你的 v-if 判斷內容。
而 v-if 就會將不滿足判斷式的內容給抽離掉，這樣就會浪費掉之前 v-for 渲染出來的元素的資源，所以，才不建議這樣用。
那比較好的方式可以 v-for 搭配 v-show，因為，v-show 只是為不滿足判斷式的元素，去更改其 display 的樣式，這樣比較不會浪費資源。
另外，你也可以先用 computed 過濾掉原始不要的資料，最後，再透過 v-for 去渲染出 computed 過濾後的結果。