Vue中使用alert(提示框)來跟用戶進行交互,但是在某些情況下我們需要來關閉這個提示框,下面是一個簡單的示例。
alert("點擊確定關閉提示框"); setTimeout(function() { var alertBox = document.getElementsByClassName('alert')[0]; alertBox.style.display = 'none'; }, 5000);
這個示例演示了如何使用setTimeout函數來讓提示框在5秒鐘后自動關閉。需要注意的是這個示例直接通過操作DOM(文檔對象模型)來控制提示框的顯示和隱藏,這樣做并不是很好的方式。
Vue的alert組件是一個受控組件,也就是說它本身并不控制自己的顯示和隱藏狀態,而是由代碼驅動它的狀態變化。下面是一個更加通用的示例:
{{ alertMessage }}
這個示例展示了如何使用Vue的組件來展示一個提示框,并且通過控制組件狀態來控制提示框的顯示和隱藏。其中展示方法showAlertFunc直接修改了組件狀態來顯示提示框,關閉方法hideAlert也是通過修改組件狀態來關閉提示框。
總之,在Vue中關閉alert組件的方法基本上是通過控制組件狀態來實現,而不是直接操作DOM。