練習 - 實務屬性繫結

5 分鐘

假設您想要為您的客戶顯示太空巡航的影像。因為每一種類型的巡航探險都有不同的影像，而且可能為不同的樣式，所以您需要將影像屬性新增至應用程式的資料物件。

將屬性新增至資料物件

在先前的練習中，您已在 App 物件內建立 data() 方法。現在要新增影像的屬性。

開啟 index.js 檔案。

緊接在行 // additional properties later 之後，新增下列程式碼。

productImage: 'assets/cruise.jpg',
productImageDescription: 'An astronaut floats outside the window while you sit in comfort',
productImageStyle: {
    'border-radius': '15px'
}

index.js 檔案現在會包含下面程式碼。

const app = Vue.createApp({
    data() {
        return {
            productName: 'Book a Cruise to the Moon',
            productDescription: 'Cruise to the moon in our luxurious shuttle. Watch the astronauts working outside the International Space Station.',
            // additional properties later
            productImage: 'assets/cruise.jpg',
            productImageDescription: 'An astronaut floats outside the window while you sit in comfort',
            productImageStyle: {
                'border-radius': '15px'
            }
        }
    },
});

新增 HTML

現在更新 HTML 以包含影像。您會使用屬性繫結來設定屬性和樣式。

開啟 index.html 檔案。
緊接在行 <div>{{ productDescription }}</div> 之後，新增下列 HTML。
```
<img :src="productImage" :alt="productImageDescription" :style="productImageStyle" />
```
應用程式的整個 div 元素現在看起來應該像下列程式碼。
```
<div id="app">
    <h2>{{ productName }}</h2>
    <div>{{ productDescription }}</div>
    <img :src="productImage" :alt="productImageDescription" :style="productImageStyle" />
</div>
```
請注意如何在所有屬性上使用速記標記法 :attribute。相較於較長的 v-bind:attribute 格式，這種使用方式可讓程式碼更容易閱讀。

測試結果

儲存所有檔案。
在瀏覽器中，您現在應該會看到顯示在網頁上的影像。若您看不到，請重新整理網頁。
以滑鼠右鍵按一下影像，然後選取 [檢查] 或 [檢查來源]。請注意瀏覽器和 HTML 中的開發人員工具。在 HTML 中，請注意，src 和 alt 皆設為 Vue 資料中的值。
```
<img src="assets/cruise.jpg" alt="An astronaut floats outside the window while you sit in comfort">
```

探索選項

您現在已有功能完整的 Vue.js 應用程式。如果您變更部分的值和屬性，可以看到變更反映在網頁上。

您可以隨意變更 CSS 檔案的樣式和類別。也請探索可用的繫結選項。

練習 - 實務屬性繫結

將屬性新增至資料物件

新增 HTML

測試結果

探索選項

意見反應