按鈕顯示隱藏是一個非常常見的功能，我們可以通過Vue的v-if和v-show指令來實現。v-if可以根據條件來添加或刪除DOM元素，而v-show則是控制DOM元素的CSS屬性display來實現顯示或隱藏。

下面我們來看一個簡單的例子，我們有一個按鈕，點擊按鈕可以顯示或隱藏一張圖片。

<template>
<div>
<button @click="showImage = !showImage">{{ showImage ? '隱藏圖片' : '顯示圖片' }}</button>
<img v-show="showImage" src="https://example.com/image.png">
</div>
</template>
<script>
export default {
data() {
return {
showImage: false
};
}
};
</script>

在上面的代碼中，我們定義了一個showImage屬性，初始值為false，表示圖片默認是隱藏的。當按鈕被點擊時，會通過showImage的取反來控制圖片的顯示或隱藏。

在模板中，我們使用v-show指令來控制圖片的顯示或隱藏。當showImage為true時，圖片會顯示出來，否則會隱藏。我們還給按鈕添加了一個click事件，當點擊按鈕時會將showImage取反，從而控制圖片的顯示或隱藏。

另外，我們也可以使用v-if指令來實現相同的功能。下面是使用v-if指令的代碼示例。

<template>
<div>
<button @click="showImage = !showImage">{{ showImage ? '隱藏圖片' : '顯示圖片' }}</button>
<img v-if="showImage" src="https://example.com/image.png">
</div>
</template>
<script>
export default {
data() {
return {
showImage: false
};
}
};
</script>

在上面的代碼中，我們使用v-if指令來控制圖片的顯示或隱藏。當showImage為true時，圖片會被添加到DOM中，否則圖片會從DOM中刪除。其他部分與使用v-show指令的示例相同。

在使用v-if和v-show指令時，需要注意它們的區別。v-if是根據條件來添加或刪除DOM元素，因此如果條件為false時，DOM元素不會存在。而v-show則是控制DOM元素的CSS屬性display來實現顯示或隱藏，因此即使條件為false時，DOM元素仍然存在，只是被隱藏了。

總的來說，使用v-if和v-show指令來實現按鈕顯示隱藏是一種非常方便的方法。我們可以根據實際需要選擇使用其中的一種指令。同時，需要注意它們的區別，并在實際開發中選擇最合適的方法來實現功能。