在Vue中，彈窗的顯示和隱藏是一個常見的需求。通常，我們會使用某些組件庫提供的彈窗組件，比如Element UI的Dialog組件。但是，有時候我們需要自己實現一個彈窗組件，這時候就需要學會如何控制彈窗的顯示和隱藏了。

一般來說，我們有兩種方式來控制彈窗的顯示和隱藏：

上面的代碼中，我們定義了一個showDialog變量，用來控制彈窗的顯示和隱藏。當showDialog為true時，彈窗顯示，當showDialog為false時，彈窗隱藏。在模板中，我們使用v-show指令來控制彈窗的顯示和隱藏。

上面的代碼中，我們使用了<dialog>元素，它是HTML5提供的一個新元素，用來顯示對話框內容。我們通過設置open屬性來控制彈窗的顯示和隱藏。當open為true時，彈窗顯示，當open為false時，彈窗隱藏。而當彈窗關閉時，我們監聽了close事件，然后將showDialog變量設置為false，以便在下次需要顯示彈窗時可以正常工作。

無論是使用v-show還是使用<dialog>元素，我們都可以輕松地控制彈窗的顯示和隱藏。如果你想要實現更復雜的彈窗效果，可以考慮使用一些第三方庫，比如Vue-SweetAlert2、Vue-Modal-Dialog等。