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
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
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg