v-for循環語句 – Vue3新手基礎教程

v-for 指令需要以?site in sites?形式的特殊語法， sites 是源數據數組并且 site 是數組元素迭代的別名。

v-for 綁定數組

v-for 可以綁定數據到數組來渲染一個列表：

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.text }}
    </li>
  </ol>
</div>
<script>
const app = {
  data() {
    return {
      sites: [
        { text: 'Google' },
        { text: 'Runoob' },
        { text: 'Taobao' }
      ]
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

瀏覽器渲染結果

1. {{ site.text }}

v-for 綁定數組的索引

v-for 還支持一個可選的第二個參數，參數值為當前項的索引：

index 為列表項的索引值（從0開始）

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <ol>
    <li v-for="(site, index) in sites">
      {{ index }} -{{ site.text }}
    </li>
  </ol>
</div>
<script>
const app = {
  data() {
    return {
      sites: [
        { text: 'Google' },
        { text: 'Runoob' },
        { text: 'Taobao' }
      ]
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

瀏覽器渲染結果

1. {{ index }} -{{ site.text }}

第一列的，1、2、3是li列表帶來的，第二列的0、1、2是索引值帶來的。

若讓索引值從1開始，可參考如下代碼。

{{ index+1 }} -{{ site.text }}

v-for 在模板 <template> 中使用 v-for：

<template v-for="site in sites">
    <li>{{ site.text }}</li>
    <li>--------------</li>
  </template>

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
	<ul>
	  <template v-for="site in sites">
		<li>{{ site.text }}</li>
		<li>--------------</li>
	  </template>
	</ul>
</div>
<script>
const app = {
  data() {
    return {
      sites: [
        { text: 'Google' },
        { text: 'Runoob' },
        { text: 'Taobao' }
      ]
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

瀏覽器渲染結果

v-for 迭代對象

v-for 可以通過一個對象的屬性來迭代數據：

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <ul>
    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>
</div>
 
<script>
const app = {
  data() {
    return {
      object: {
        name: '菜鳥教程',
        url: 'http://www.runoob.com',
        slogan: '學的不僅是技術，更是夢想！'
      }
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

瀏覽器渲染結果

• {{ value }}

v-for 迭代對象第二參數：鍵名

你也可以提供第二個的參數為鍵名：

<li v-for="(value, key) in object">
    {{ key }} : {{ value }}
    </li>

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <ul>
    <li v-for="(value, key) in object">
    {{ key }} : {{ value }}
    </li>
  </ul>
</div>
 
<script>
const app = {
  data() {
    return {
      object: {
        name: '菜鳥教程',
        url: 'http://www.runoob.com',
        slogan: '學的不僅是技術，更是夢想！'
      }
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

瀏覽器渲染結果

• {{ key }} : {{ value }}

v-for 迭代對象第三個參數：索引

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

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>
 
<script>
const app = {
  data() {
    return {
      object: {
        name: '菜鳥教程',
        url: 'http://www.runoob.com',
        slogan: '學的不僅是技術，更是夢想！'
      }
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

• {{ index }}. {{ key }} : {{ value }}

v-for 迭代整數

<li v-for="n in 10">
     {{ n }}
    </li>

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>
 
<script>
	Vue.createApp(app).mount('#app')
</script>

瀏覽器渲染效果

• {{ n }}

顯示過濾/排序后的結果

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <ul>
    <li v-for="n in evenNumbers">{{ n }}</li>
  </ul>
</div>
 
<script>
const app = {
    data() {
        return {
            numbers: [ 1, 2, 3, 4, 5 ]
	     }
    },
    computed: {
        evenNumbers() {
            return this.numbers.filter(number => number % 2 === 0)
        }
    }
}
 
Vue.createApp(app).mount('#app')
</script>

瀏覽器渲染

• {{ n }}

v-for/v-if 聯合使用

聯合使用 v-for/v-if 給 select 設置默認值：

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
   <select @change="changeVal($event)" v-model="selOption">
      <template v-for="(site,index) in sites" :site="site" :index="index" :key="site.id">
         <!-- 索引為 1 的設為默認值，索引值從0 開始-->
         <option v-if = "index == 1" :value="site.name" selected>{{site.name}}</option>
         <option v-else :value="site.name">{{site.name}}</option>
      </template>
   </select>
   <div>您選中了:{{selOption}}</div>
</div>
 
<script>
const app = {
    data() {
        return {
            selOption: "Runoob",
            sites: [
                  {id:1,name:"Google"},
                  {id:2,name:"Runoob"},
                  {id:3,name:"Taobao"},
            ]
         }
        
    },
    methods:{
        changeVal:function(event){
            this.selOption = event.target.value;
            alert("你選中了"+this.selOption);
        }
    }
}
 
Vue.createApp(app).mount('#app')
</script>

瀏覽器渲染效果

您選中了:{{selOption}}

組件

如果你還沒了解組件的內容，可以先跳過這部分。

在自定義組件上，你可以像在任何普通元素上一樣使用 v-for：

<my-component v-for="item in items" :key="item.id"></my-component>

參考文章

• https://www.runoob.com/vue3/vue3-v-for.html