v-if 與 v-show 的微小差距

v-if 與 v-show 的微小差距

今天在解一個 issue，有一個表單如下，選好設備與類型之後，進行搜尋會生成下方的表格，但是這個表格有一個bug，就是每次重新搜尋，重新生成表格都不會捲回表格最上方，而是會停在上次捲度的位置。剛好可以藉這個案例來談談 v-if 與 v-show的差異。
Read Morev-if 與 v-show 的微小差距
Bootstrap 卡片與頁籤混雙

Bootstrap 卡片與頁籤混雙

今天在幫一個舊系統升版到 VUE3 跟 Bootstrap5，舊系統是用 Bootstrap-Vue 與 Vue2 做整合，所以很多 HTML 結構要從 Bootstrap-Vue 拆出來，有些程式邏輯要另外寫。今天在拆一個卡片頁籤，發覺 Bootstrap 官方文件卡片頁籤只有結構，沒有可以切換的範例，所以我筆記一下 頁籤卡片(nav-tabs + card)要如何做出可以切換的互動。
Read MoreBootstrap 卡片與頁籤混雙
ref( ) 響應QA小學堂

ref() 響應小學堂

Vue3 提供了 ref() 跟 reactive() 兩種可供資料與畫面響應的資料類型，當程式或 API 傳來的資料改變時，畫面上的資料也會隨之改變。Vue3 的官方文件尤其推薦用戶使用 ref() 來宣告響應資料。以下整理幾個使用 ref() 時會迷惑的問題與解答
Read Moreref() 響應小學堂
computed 的簡單任務

computed 的簡單任務

在 Vue 中有一個叫 computed 的神奇方法，它可以觀察在data的變數，一旦變數有了改變，就會去取變數來運算，產生一個新的值呈現在畫面上，而這個新的值不會寫回 Option API 的 data 中
Read Morecomputed 的簡單任務