點燈坊

失くすものさえない今が強くなるチャンスよ

使用 v-for 列舉 Array

Sam Xiao's Avatar 2024-01-29

當 Array 來自於 JSON 檔或 API 時，會以 v-for 將 Array 在 HTML 使用 <ul> 與 <li> 展開。

Version

Vue 3.4

Composition API

<template>
  <ul>
    <li v-for="(item, i) in companies" :key="i">
      <span>{{ item.name }}</span>
      <span>{{ item.product }}</span>
      <span>{{ item.price }}</span>
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'

let companies = ref([
  { name: 'Apple', product: 'MacBook', price: 100 },
  { name: 'Google', product: 'Android', price: 200 },
  { name: 'Microsoft', product: 'Windows', price: 300 }
])
</script>

Line 14

let companies = ref([
  { name: 'Apple', product: 'MacBook', price: 100 },
  { name: 'Google', product: 'Android', price: 200 },
  { name: 'Microsoft', product: 'Windows', price: 300 }
])
  • companies state 以 Array 形式儲存

Line 2

<ul>
  <li v-for="(item, i) in companies" :key="i">
    <span>{{ item.name }}</span>
    <span>{{ item.product }}</span>
    <span>{{ item.price }}</span>
  </li>
</ul>
  • 外層以 <ul> 表示要列舉 Array
  • v-for：將 v-for 寫在 <li>
    • 第一個參數習慣為 item，表 Array 的 element
    • 第二個參數為自動產生的 index，為 zero-based
    • index 要拿來指定 key，否則 ESLint 會有 warning

Options API

<template>
  <ul>
    <li v-for="(item, i) in companies" :key="i">
      <span>{{ item.name }}</span>
      <span>{{ item.product }}</span>
      <span>{{ item.price }}</span>
    </li>
  </ul>
</template>

<script>
export default {
  data: () => ({
    companies: [
      { name: 'Apple', product: 'MacBook', price: 100 },
      { name: 'Google', product: 'Android', price: 200 },
      { name: 'Microsoft', product: 'Windows', price: 300 }
    ]
  })
}
</script>
  • 最後附上相同功能的 Options API 供參考
  • State 宣告在 data() function
  • v-for 使用上不變

Conclusion

  • v-for 習慣會搭配 <ul> 與 <li> 展開，然後再使用 CSS 去修飾成想要的 style

# Vue