隨著Web應用程式的發展，使用者互動變得越來越重要。 Vue是一種流行的JavaScript框架，用於建立現代Web應用程式。在Vue中，我們可以輕鬆地添加互動性，例如在點擊按鈕時顯示一張圖片。本文將介紹Vue中如何實現此功能。
首先，我們要準備一張圖片。這裡我們以一張名為「example.jpg」的圖片為例。將圖片放置在Vue應用程式的靜態資料夾中（通常是「public」資料夾），如下所示：
/public/images/example.jpg
接下來，我們需要建立一個Vue元件，並在其中新增一個按鈕和一個圖像元素。在這個範例中，我們將使用Vue單一檔案元件（SFC）：
<template>
<div>
<button @click="showImage">显示图片</button>
<img v-if="show" src="/images/example.jpg" alt="示例图片">
</div>
</template>
<script>
export default {
data() {
return {
show: false
};
},
methods: {
showImage() {
this.show = true;
}
}
};
</script>在這個元件中，我們定義了一個資料屬性“show”，它是布林類型的。在開始時，我們將它的值設為“false”，因為預設情況下我們不想顯示圖片。當使用者點擊按鈕時，我們將呼叫一個名為「showImage」的方法，它將更新資料屬性「show」的值以顯示圖片。
圖片元素被添加了一個「v-if」指令，用於根據需要顯示或隱藏它。它的值是表達式“show”，這意味著只有在“show”為true時才會顯示圖片。
最後，我們匯出這個元件並將其包含在我們的Vue應用程式中。這可以在Vue實例中完成，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Vue显示图片示例</title>
</head>
<body>
<div id="app">
<image-display></image-display>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="src/components/ImageDisplay.vue"></script>
<script>
new Vue({
el: '#app',
components: {
'image-display': ImageDisplay
}
});
</script>
</body>
</html>在這個Vue實例中，我們將元件「image-display」包含在一個名為「app」的div元素中。我們也導入了我們的Vue元件，並將其作為元件選項物件中的屬性傳遞給Vue實例，以便作為Vue應用程式的一部分載入。
現在，當使用者點擊顯示圖片按鈕時，我們的Vue應用程式將顯示「example.jpg」圖片。這是一個基本的Vue互動範例，可以幫助您在自己的Web應用程式中添加互動性。
以上是vue怎麼點擊按鈕出現一張圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！
