#### v-for

1. 渲染列表

```vue

<template>

? ? <ul v-for="(item,index) in list" >

? ? ? ? <li>{{ item }}</li>

? ? </ul>

</template>

<script setup>

? ? import { ref } from 'vue';

? ? let list = ref(['蘋果', '香蕉', '橙子'])

</script>

```

2. 渲染對象列表

- 

```vue

? ? <ul v-for="(item,index) in list" >

? ? ? ? <li>{{ item.name }} - {{ item.age }}</li>

? ? </ul>

```

3. 動態添加列表項

- 

```vue

<template>

? ? <input type="text" v-model="txt" placeholder="請輸入內容">

? ? <input type="button" value="添加到列表" @click="btn">

? ? <ul v-for="item in list" >

? ? ? ? <li>{{ item}}</li>

? ? </ul>

</template>

<script setup>

? ? import { ref } from 'vue';

? ? let txt = ref('')

? ? let list = ref([])

? ? const btn = ()=>{

? ? ? ? list.value.push(txt.value)

? ? }

</script>

```

4. 渲染嵌套列表

- 

```vue

<template>

? ? <ul v-for="(item,index) in list" >

? ? ? ? <li>子數組{{index+1}}：

? ? ? ? ? ? <ul>

? ? ? ? ? ? ? ? <li>{{ item }}</li>

? ? ? ? ? ? </ul>

? ? ? ? </li>

? ? </ul>

</template>

<script setup>

? ? let list = ref([['蘋果', '香蕉'], ['橙子', '葡萄']])

</script>

```

5. 分組渲染列表

- 

```vue

<template>

? ? <ul v-for="(item,index) in list">

? ? ? ? <h2 v-if="index === 0 || item.group !== list[index-1].group">{{ item.group }}</h2>

? ? ? ? <li>{{ item.name }}</li>

? ? </ul>

</template>

<script setup>

list.value.sort((a,b)=>a.group.localeCompare(b.group))

</script>

```

6. 分組渲染列表

- 

- 

```vue

<template>

? ? <input type="button" value="按名字排序" @click="btnName">

? ? <input type="button" value="按年齡排序" @click="btnAge">

? ? <ul v-for="(item,index) in list">

? ? ? ? <li>{{ item.name }} - {{ item.age }}</li>

? ? </ul>

</template>

<script setup>

import { ref } from 'vue';

let list = ref([ { name: '張三', age: 20 }, { name: '李四', age: 22 }, { name: '王五', age: 18 } ])

let btnName = ()=>{

? ?list.value.sort((a,b)=>a.name.localeCompare(b.name))

}

let btnAge = ()=>{

? ? list.value.sort((a, b) => a.age - b.age);

}

</script>

```

?

### 筆記

#### 條件渲染

1. `v-if`

- 也可在 `<template>` 上使用

? ? ```html

? ? <h1 v-if="awesome">Vue is awesome!</h1>

? ? <h1 v-else>Oh no 😢</h1>

? ? ```

- **`v-else-if` 指令**

? ? ```html

? ? <div v-if="type === 'A'">A</div>

? ? <div v-else-if="type === 'B'">B</div>

? ? <div v-else-if="type === 'C'">C</div>

? ? <div v-else>Not A/B/C</div>

? ? ```

2. `v-show`

? - 通過切換 `display` CSS 屬性來顯示或隱藏元素【元素始終會被渲染，只是樣式被切換】

? ? ```html

? ? <h1 v-show="ok">Hello!</h1>

? ? ```

3. 區別

? - `v-if` 初始渲染時條件為假則不渲染任何內容。

? - `v-show` 始終渲染元素，僅切換 `display` 屬性。

? - `v-if` 【切換】開銷高，適合條件很少改變；`v-show` 初始渲染開銷高但切換開銷低，適合頻繁切換

?

#### 列表渲染

- **`v-for` 指令**

? - 基于數組或對象渲染列表。

? - 需要使用 `item in items` 形式的語法，其中 `items` 是數組或對象，`item` 是迭代項的別名。

? - 支持可選的第二個參數表示當前項的位置索引。

? ? ```html

? ? <li v-for="(item, index) in items">

? ? ? {{ parentMessage }} - {{ index }} - {{ item.message }}

? ? </li>

? ? ```

- **`v-for` 與對象**

? - 支持三個參數：`value`、`key` 和 `index`。

? ? ```html

? ? <li v-for="(value, key, index) in myObject">

? ? ? {{ index }}. {{ key }}: {{ value }}

? ? </li>

? ? ```

- **`v-for` 與范圍值**

? - `v-for` 可以直接接受整數值，用于重復渲染指定次數。

? ? ```html

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

? ? ```

?

- **`v-for` 與 `v-if`**

? - 建議將 `v-for` 放在 `<template>` 上，再在其內部使用 `v-if`。

? ? ```html

? ? <template v-for="todo in todos">

? ? ? <li v-if="!todo.isComplete">

? ? ? ? {{ todo.name }}

? ? ? </li>

? ? </template>

? ? ```

- **通過 `key` 管理狀態**：幫助 Vue 跟蹤節點的標識，以重用和重新排序現有元素。

? ? ```html

? ? <div v-for="item in items" :key="item.id">

? ? ? <!-- 內容 -->

? ? </div>

? ? ```

?

- ?`:style` ：動態樣式綁定

? ? ```html

? ? <div :style="{ color: textColor, fontSize: fontSize + 'px' }">Styled Div</div>

? ? ```

- **`class` 綁定**

? - 使用 `:class="$attrs"` 將父組件傳遞的屬性綁定到子組件的 `class` 上。

? ? ```html

? ? <div :class="$attrs">Class Binding</div>

? ? ```

- **`v-if` 與 `v-show` 的 DOM 行為**

? - `v-if` 無論 `true` 或 `false`，DOM 元素都存在，只是根據條件渲染或銷毀。

? - `v-show` 使用樣式控制顯示與否，DOM 元素始終存在。