Vue卡列表中不同卡片顯示不同背景顏色

2021-09-23 10:31:25 字數 552 閱讀 6706

最近做乙個專案的移動端頁面,需要完成乙個卡列表,不同銀行顯示不同顏色的問題,一開始考慮過通過識別銀行圖示色調生成,但最後為了考慮開發成本,只做幾種通用的色調。

具體就是用v-for命令遍歷,**

='cardlist' v-

for=

"i in item"

:key=

'index'

:class

='obj[i.bank]'

>

<

/div>

在data中寫乙個item陣列

item[

,];

再寫乙個obj物件:

obj:

然後在style中寫如redtype類和greentype類的css,還可以加入其他風格的css,當然如果要處理很多銀行的話,就需要將obj單獨寫乙個檔案,並還可以寫的更詳細。

其實這樣做很明顯不是最好的方案,主要是因為,這些東西,後端是不會做任何事,全部需要前端完成,所以很caodan…

ListView中顯示不同的item

listview中顯示不同的item,一般應用在插廣告什麼的 直接說思路 材料 乙個主頁面 activity list man 下巢狀個listview 若干個子頁面 listview的item實現 取名為 listview one item 和listview two item 乙個主頁面對應的a...

vue中不同插槽的用途

在元件中如果有相同地方,但又需要插入不同的內容時使用 1 預設插槽 用於插入一處內容 語法 1 定義插槽 2 使用插槽 元件 插槽內容2 具名插槽 用於插入多處內容 語法 1 定義插槽 2 使用插槽 元件 標籤 slot 插槽名 插槽內容在定義插槽時,需要使用name屬性標識插槽名,使用slot 插...

自定義tabs切換顯示不同內容 Vue

使用方法 1 傳入內容為標題的title陣列 2 向外傳遞了乙個currentindex的方法,引數就是當前選中標題的索引 根據索引展示不同內容 示例 tab tab tit for item,index in title key index class currentindex index?on ...