Vue 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-show的div會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 transition中用多個v-if, v-show
Article Name
vue 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

隨選筆記文

Front-End

IntersectionObserver:上篇-基本介紹及使用

Vue

拿 Trello 當資料庫 建一個店家清單 – 下篇:建立清單頁面

Vue

用 Storybook 做一個 UI 整理集

Analytics Google

GA 自訂維度的應用 分類之下的文章成效

Analytics Google

Google Analytics 用戶計時 / User Timings

WordPress

WordPress 好用的會員相關外掛:登入安全性、會員系統

Front-End

用原生 JS 做一個簡單的手風琴 Accordion / Collapse 功能

Front-End

從使用者輸入網址,到瀏覽器呈現出來,經過了哪些過程?

PWA

PWA學習筆記-1:cache、workbox基本使用

Front-End

postMessage 主頁、iframe 頁可互相傳值

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

Let's Write

前端工程師 Augustus 的學習筆記 — solving problems, in simple ways.