vue 列表式渲染 v-for

v-for指令是提供了一個動態渲染 array 或是 Object的方法，我們可以在<template>區塊使用 item in items的語法來呼叫v-for進行動態渲染。

v-for 語法

v-for="item in items"

其中 items 是我們在setup裡頭宣告的array，item代表在array裡頭的值，v-for會從頭到尾的根據array的內容生成html元素。

範例

程式碼

<template>
    <ul>
      <li v-for="city in cities">
        
      </li>
    </ul>
</template>

<script>
export default {
  setup () {
    const cities=ref(['Taipei','New Taipei City','Taoyuan','Kaohsiung'])
    return {cities}
  }
}
</script>

Vue.createApp({ data() { return { items: [{ message: ‘Foo’ }, { message: ‘Bar’ }] } } }).mount(‘#array-rendering’)

結果

上述的html頁面渲染結果如下

• Taipei
• New Taipei City
• Taoyuan
• Kaohsiung

取得index

v-for的語法和javascript的for-loop一樣，當我們在遍歷過程中想要同時取得陣列中的值和指標時，只要這樣寫就可以了。

<template>
    <ul>
      <li v-for="city, index in cities">
         - 
      </li>
    </ul>
</template>

結果

上述的html頁面渲染結果如下

• 0 - Taipei
• 1 - New Taipei City
• 2 - Taoyuan
• 3 - Kaohsiung

陣列內容更新

下列的方法會對陣列進行資料異動，不管我們在哪裡呼叫這些方法，vue只要觀測到了陣列的資料更新，便會進行重新渲染。

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

替換整個陣列

有些時候，你可能不想更動陣列中的資料，而是產生一個新的陣列再渲染，下列的方法會返回一個新的陣列，而不是修改原有的陣列。

• filter()
• concat()
• slice()

例如，你只想渲染陣列中的偶數個內容，你可以這麼寫：

<template>
    <ul>
      <li v-for="city, index in even_cities">
         - 
      </li>
    </ul>
</template>

<script>
export default {
  setup () {
    const cities=['Taipei','New Taipei City','Taoyuan','Kaohsiung']
    const even_cities=computed(cities.filter((item,index)=>{return index%2===0}))
    return {even_cities}
  }
}
</script>

不好的寫法

綜合使用v-for和v-if做列表式的條件渲染也可以出現上述結果，但是我們不推薦這麼做，因為效能不佳。

比較好的做法是用computed搭配方法去產生一個新的陣列。

<template>
    <ul>
      <li v-for="city, index in cites">
        <template v-if="index%2===0">
         - 
        </template>
      </li>
    </ul>
</template>

<script>
export default {
  setup () {
    const cities=ref(['Taipei','New Taipei City','Taoyuan','Kaohsiung'])
    return {cities}
  }
}
</script>

用Range指定迴圈次數

v-for可以指定一個數字當作迴圈次數，以下是一個範例 v-for can also take an integer. In this case it will repeat the template that many times.

<div id="range" >
  <span v-for="n in 10">隻羊</span>
</div>

使用

和v-if類似，v-for同樣能夠使用在<template>標籤上同時渲染多個html元素。

範例如下

<ul>
  <template v-for="item in items">
    <li></li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

在v-for裡使用Object

Object的v-for語法

類似陣列在v-for中的使用法式，Object在v-for裡的語法如下：

<div v-for="(value, key, index) in object">
  . : 
</div>

範例

<ul id="v-for-object" class="demo">
  <li v-for="value,key in object">
      
  </li>
</ul>

<script>
export default {
  setup () {
      const object={								
            '中正區':100,
            '大同區':103,
            '中山區':104,
            '松山區':105,
            '大安區':106	
        }
    return {object}
    }
  }
</script>

渲染結果如下

中正區　 100		
大同區　 103		
中山區　 104		
松山區　 105		
大安區　 106	

注意：
Object的渲染順序是根據 Object.keys() 而來，並不能保證它的順序在不同的Javascript Engine都是相同的。