今天繼續介紹Vue的語法

v-for
v-for在官網上是寫List Rendering(列表渲染)，不過v-for的執行方式就像我們一般寫for迴圈，藉由v-for可以執行一個陣列或物件裡的資料，來重複生成多個HTML，而不是一直重複手動複製貼上。要注意的是，寫v-for時要給一個:key屬性，是用來識別每個元素的id。
v-for的基本語法是<div v-for =”item in items” :key=”item.id”> item表示陣列中的元素，items則是陣列，代表如果偵測到的item還是屬於陣列裡的元素的話，這迴圈會繼續執行。
:key則給每個元素唯一的識別id ，當陣列中的資料新增、刪除、排序，vue會根據key值來判斷哪些元素重新渲染，哪些則不用變動，這提高了渲染效率。
範例

<script setup>
   const products = [
 	 { id: 1, name: '產品 A', price: 100 },
 { id: 2, name: '產品 B', price: 150 },
 { id: 3, name: '產品 C', price: 200 }
  ]
</script> 
<template>
    <div v-for="product in products" :key="product.id"> 
<p>{{ product.name }}</p> <p>價格: ${{ product.price }}</p>
    </div>
</template>

products中有三樣產品，執行<div v-for="product in products" :key="product.id"> 則表示如果product是products中的元素，就會執行<p>{{ product.name }}</p> 那麼<p>價格: ${{ product.price }}</p>這段程式將對應的產品名稱和價格列出來。

computed
computed:計算屬性，能定義由其他響應式資料計算而來的屬性，只有當依賴的資料改變時，computed的值才會自動更新，也就是說如果被改變的資料不是computed所依賴的資料，即使多次存取，都不會重複執行函式，而是立即返回上次計算的結果。

範例

import { ref, computed } from 'vue'; 
     const price = ref(10); 
     const quantity = ref(2);
 const total = computed(() => price.value * quantity.value);

import { ref, computed } from 'vue'; 先從Vue導入ref和computed函式
const total = computed(() => price.value * quantity.value);
宣告一個名為total的計算屬性，price.value * quantity.value是計算屬性的計算邏輯
computed(() => . . .) 是一個computed函式，接收一個箭頭函式(匿名函式)
當price或quantity的值改變時，total才會重新計算並將畫面中有使用total的地方自動更新。

總而言之computed增加了程式的可讀性，且依賴追蹤的特性不會重複執行資料沒有被更改的函式，既能讓程式碼更簡潔，也能保證程式的效能。

好的今天先介紹到這，各位明天見~