EP17 - ex3. Attribute Bindings

第三個範例是屬性綁定，官方文件裡頭有Tutorial跟Example
Tutorial還是以觀念為主，我還是先實作Example感受比較快～
不過大家有興趣還是可以多看看 https://vuejs.org/tutorial/

範例3：屬性綁定

<script setup>
import { ref } from 'vue'
const message = ref('Hello World!')
const isRed = ref(true)
const color = ref('green')

function toggleRed() {
    isRed.value = !isRed.value
}
function toggleColor() {
    color.value = color.value === 'green' ? 'blue' : 'green'
}</script>

<template>
    <p>Example 3:</p>
    <p>
        <span :title="message">
            Hover your mouse over me for a few seconds to see my dynamically bound title!
        </span>
    </p>
    <p :class="{ red: isRed }" @click="toggleRed">
        This should be red... but click me to toggle it.
    </p>
    <p :style="{ color }" @click="toggleColor">
        This should be green, and should toggle between green and blue on click.
    </p>
</template>

<style>
.red {
    color: red;
}
</style>

<script setup>

• 引入 ref 函數：ref 是 Vue Composition API 的一部分，用於創建響應式數據。
• 創建響應式變數：
  • message：包含要綁定到元素的標題。
  • isRed：布林值，控制一段文字的顏色。
  • color：用於控制樣式顏色的字串，初始為 'green'。
• 定義函數：
  • toggleRed：切換 isRed 的值（true 或 false），用來切換文字顏色。
  • toggleColor：切換 color 的值，當前是 'green' 時變成 'blue'，反之亦然。

<template>

• 標題綁定：
  • <span :title="message">：使用 :title 動態綁定 message，當滑鼠懸停在該元素上時會顯示 Hello World!。
• 類別綁定：
  • <p :class="{ red: isRed }" @click="toggleRed">：
  • • :class：根據 isRed 的值動態應用 red 類別。當 isRed 為 true 時，該段落的顏色會變為紅色。
    • @click：點擊這段文字時，會調用 toggleRed 函數來切換 isRed 的值。
• 樣式綁定：
  • <p :style="{ color }" @click="toggleColor">：
  • • :style：根據 color 的值動態設置樣式顏色。
    • @click：點擊該段落時，會調用 toggleColor 函數來切換顏色。

<style>

• 定義了一個 .red 類別，將文字顏色設置為紅色。當 isRed 為 true 時，這個類別會被應用到相關段落上。

第三個範例！似乎也沒什麼問題吧？
不熟屬性綁定的朋友們～快回去複習EP6
有時候還是覺得文件寫這麼多～不如範例給多一點www