vue 解決v-for 循環列表生成不同背景顏色問題

vue 解決v-for 循環列表生成不同背景顏色問題

今天在做項目的時候我就遇到一個問題，效果圖是這樣的：

 

• 這是一個表示樓層數的列表，根據不同建築有不同的樓層，每一層樓都要有不同的背景顏色。

• 要是一個一個的寫樓層加背景太麻煩了。

• 而且你根本沒法寫完，因爲有多少了樓多少層你根本沒法統計。

• 在說了，身爲一個合格的前端，怎麼只能寫那些死頁面。

• 下面給大家看一下，我是怎麼實現的上面效果。

首先這是html代碼

  <ul> 
     <li v-for="count in this.floor" 
     :key="count" :style="randomRgb(item)" > {{count}}F</li>
  </ul> 

用過style綁定一個函數如下：

randomRgb(item) {
        let R = Math.floor(Math.random() * 130+110);
        let G = Math.floor(Math.random() * 130+110);
        let B = Math.floor(Math.random() * 130+110);
        return {
          background: 'rgb(' + R + ',' + G + ',' + B + ')'
        };
      }

在裏面可以設置顏色 Math.floor(Math.random() * 130+110) 這裏面的數值可以自己改，來控制顏色的大體範圍。最後通過 return 返回給 style

最上面這個 this.floor 是後端傳過來的參數，你要是求簡單可以自己在 data 裏寫一個。

就這樣就實現了。

要是還有問題的可以留言聯繫我。