vuetify treeview切換卡片

2021-10-25 03:48:29 字數 1230 閱讀 2123

效果圖記錄一下自己初學vuetify的一些心得。

在官方文件中雖然有個簡單的切換卡片的例子,但對於初學者來說可能過於難懂。於是自己踩過許多坑之後總結了一些關鍵點,希望對後來的一些初學者有幫助。

>

>

:active.sync

="active"

:items

="items"

activatable

open-on-click

transition

hoverable

>

v-treeview

>

mode

="out-in"

>

v-if

="!selected"

>

nothing selecteddiv

>

v-else

:key

="selected.id"

>

>

}v-card-title

>

v-card

>

v-scroll-y-transition

>

div>

template

>

上面寫了乙個擁有兩個列表項的treeview和乙個展示框。當沒有選擇時會顯示div裡面的內容,一旦選擇了某個列表項就會在卡片中顯示該選項的name。

export

default,]

}), computed:,}

}<

/script>active用於儲存選中項的資訊,在treeview選中後會同步到此處。

items是列表元素

computed計算屬性中selected在每次呼叫都會獲取active中與選中項相同id的元素。

在template中通過:key="selected.id"來獲取選中項的id並實現切換,關於:key可參考vuefity中tab元件的使用。

簡單切換卡 (siblings 用法1)

siblings 獲得匹配集合中每個元素的同胞,通過選擇器進行篩選是可選的。siblings 獲得匹配集合中每個元素的同胞,通過選擇器進行篩選是可選的。jquery 的遍歷方法siblings 給定元素 siblings selected 如果同級返回有其他的元素是不需要操作的,需要給定要操作的元素...

bzoj 1287 Cards交換卡片(網路流)

傳送門biu 把每種卡片建乙個節點,每位除了小c以外的小朋友建乙個節點。如果小c有一種卡片的張數大於1,則連一條從源點到此種卡片的弧,流量為張數減一 如果小c有一種卡片的張數為0,則連一條此種卡片到匯點的弧,流量為1。同理,如果乙個小朋友有一種卡片的張數大於1,則連一條這個小朋友到此種卡片的弧,流量...

軟切換 硬切換,垂直切換 水平切換

1 軟切換是 先切換,後斷開 移動節點只有在取得了與新基站的鏈結之後,才會中斷與原基站的聯絡,因此在切換過程中沒有中斷,不會影響通話質量 2 軟切換由於是在頻率相同的基站間進行,在兩基站或多基站覆蓋區的交界處,移動節點同時與多個基站通訊,前向業務通道和反向業務通道的路徑分集的作用,因而可大大減少切換...