在 Vue 組件的樣板（template）中，常用以下指令處理判斷與迴圈： ## 1. 判斷式：`v-if`、`v-else` `v-if` 會依照條件決定是否渲染元素，也可以搭配 `v-else` 或 `v-else-if`。 ```vue <template> <p v-if="isLogin">歡迎回來！</p> <p v-else>請先登入。</p> </template> <script setup> import { ref } from 'vue' const isLogin = ref(true) </script> ``` 當 `isLogin` 為 `true` 時顯示「歡迎回來！」，否則顯示「請先登入」。 --- ## 2. 迴圈結構：`v-for` `v-for` 用來依序渲染陣列或物件中的資料，通常搭配 `:key` 提供每筆資料的唯一識別值。 ```vue <template> <ul> <li v-for="item in items" :key="item.id"> {{ item.name }} </li> </ul> </template> <script setup> const items = [ { id: 1, name: '蘋果' }, { id: 2, name: '香蕉' }, { id: 3, name: '橘子' } ] </script> ``` 畫面會產生三個清單項目，分別顯示「蘋果」、「香蕉」和「橘子」。