列表資料綁定(v-for)
當需要列出多筆資料時，會用到v-for語法，我們要用v-for在HTML頁面中列表資料的渲染。綁定列表資料時，列表資料的資料型態有Array和Object兩種。

• Array列表資料：
  HTML:

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

Vue實體：

<script>
    var app =Vue.createApp({
       data:function() {
         return {
            list:['yvonne','emily','karina']
         }
       },
    });
    app.mount('#app');
</script>

執行結果：

說明：
在data中建立Array資料（colors），array裡面有yvonne、emily、karina三個資料。而HTML的部分用＜li v-for = “item in list’＞{{item}}＜/li＞表示。
（item這個位置可以換別的名稱）
語法：
v-for = “(array元素總稱 , 索引) in 陣列屬性名稱”{{ array元素總稱}}

加入index：
<li v-for="(item,index) in list">{{item}} / {{index}}</li>

執行結果：

• Object列表資料：

<div id="app">
            <ul>
                <li v-for="(value,item) in name">{{item}} -> {{value}}</li>
            </ul>
        </div>

<script>
   var app =Vue.createApp({
     data:function() {
        return {
          name:{
             one:"yvonne",
             two:"emily",
             three:"karina",
          }
        };
     },
   });
  app.mount('#app');
</script>

執行結果：

說明：
在data中建立Object資料，以上面為例，其中的one、two、three為物件，冒號後為物件的值（vlaue）。
語法：
v-for = “(屬性值 , array元素總稱 , 索引) in 陣列屬性名稱”{{ array元素總稱}}
加入index：
<li v-for="(value,item,index) in name">{{item}} ->{{value}}({{index}})</li>

執行結果：

v-for與key屬性
當Array或是Object的資料有變動時，需要將Array所有元素或Object所有屬性重新渲染，只有一個小變動，卻要重新渲染全部，這樣效率會不好。所以Vue設置key屬性辨識有變動的地方，並重新渲染有修改的地方。

<div id="app">
            <ul>
                <li v-for="(value,item) in name" v-bind:key="item">
                 {{item}} -> {{value}}
                </li>
            </ul>
        </div>