Vue.js Transition 中用多個 v-if、v-show

/

v-if, v-show Tab 功能好幫手

自從開始在用 Vue.js 後,寫頁籤(Tab)功能簡單多了。不只頁籤,相似的也很好用,比方線上測驗的換頁、手風琴。

之前習慣用 v-if,今天換成 v-show 時遇到了問題,找到解法後就想說紀錄一下,以免之後遇到忘記怎麼解。


Transition 中放多個 v-if

要在 Vue Transition下用多個 v-if 去切換,最重要的是要加上 key,沒有 key 的話 Transition 的效果就不會出來,範例 code 如下:

v-for 裡的 key,用 v-bind 給唯一的值就行。


Transition 中放多個 v-show

Transition 中要放多個 v-show,會遇到問題,就是只有第一個 v-showdiv 會 render 在頁面上,其它的 div 會消失。

要解決這個問題,就不能用 transition,而要用 transition-group

範例 code 如下:


Vue Transition 多個 v-if, v-show 整理

在 Vue Transition 中,放多個 v-if,或多個 v-show,方法,整理在 CodePen 上:

Vue.js Transition multiple v-if, v-show

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

Summary
Vue.js Transition 中用多個 v-if, v-show
Article Name
Vue.js Transition 中用多個 v-if, v-show
Description
本篇大綱:v-if, v-show tab功能好幫手、transition中放多個v-if、transition中放多個v-show、vue transition多個v-if, v-show整理。自從開始在用vue.js後,寫頁籤(tab)功能簡單多了。不只頁籤,相似的也很好用,比方線上測驗的換頁、手風琴。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

API

如何用 Mockoon 快速建立 Mock APIs Server

Front-End

漸層色按鈕 Hover 效果

Front-End

用 Microsoft Clarity 網站分析工具,觀察使用者行為

Forms Google

Google 表單 用網址改變題目預設值

Google Sheets

如何用 Google Sheets / Excel 當作資料庫

Vue

Vue Transitions 製作簡單的 Carousel / Slider / 輪播功能

Front-End

TestCafe 學習筆記 – 1:自動化測試會員登入

Bot Slack

Slack 通知功能 可互動

API

Imgur API:upload, load 上傳、讀取 心得筆記

Google Maps

Google Maps API 學習筆記 – 1:地圖、標記、客製樣式

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言