VUE 實現模組分類展示資料列表

2021-10-04 10:32:02 字數 1472 閱讀 3705

專案中,會有乙個模組展示多個類別的資料,點某乙個標題只展示相關的內容。

="classifytoolbox"

>

="flexrowstart classify*******"

>

for=

"(item, index) in classifytooldata"

:key=

"index"

class

="classifytoolbtn"

:class

="[currentindex === index ? 'page-select' : '']"

@click

="clickfun(index)"

>

}<

/div>

<

/div>

="classifytoollistbody"

>

這裡是}的資料<

/div>

<

!-- 展示當前所選中分類標題對應的分類列表資料--

>

for=

"(item, index) in classifytoollist[currentindex]"

:key=

"index"

class=""

>

<

/div>

<

/div>

<

/div>

<

/div>

<

/template>

export default,,

,]// 模組分類的分頁查詢條件};

;// 預設查詢第乙個分類對應的列表資料if(

this

.classifytooldata.length >0)

);}}

});}

,// 2.查詢:分類型別對應的資料列表

篩選分類列表展示

接著昨天未完成的部分,下面接著實現,當篩選之後下面對應出現相關型別的內容。話不多說,先上效果圖。資料庫設計 文章表的sortid欄位關聯分類表的id,type id關聯type表字段。填充資料大致如下,如果不清楚sortid,和type id請移步至昨天我的另一篇部落格 php實現類似慕課網,php...

分類資料展示

category 分類的資料在每一次頁面載入後都會重新請求資料庫來載入,對資料庫的壓力比較大,而且分類的資料不會經常產生變化,所有可以使用redis來快取這個資料。前台 頁面載入事件 function function data var msg 歡迎回來,data.name span usernam...

Vue遞迴元件實現多級列表分類

資訊的分類展示 看到這種格式,我想好多人肯定會說,我可以使用v for的巢狀迴圈不就完事了。對,沒毛病這樣的話也可以做,但是如果資料又多加了 很多 級分類呢 使用v for也能實現,但是 量是不是太大了呢!也不適合後期的維護,這個時候呢,我們就可以使用我們所說道的 遞迴元件 了,使用遞迴元件,無論你...