需求：vue迴圈通過後臺介面獲得三張圖片，給每張圖片加不同的背景顏色。

通過三目運算的話只能給其中兩個元素新增顏色。

通過下標區分：

程式碼如下：

html:

        <div class="mainBox">
          <div class="city-box" v-for="(tab_list,index) in home_list" :key="tab_list.id">
            <div class="img-box">
              <router-link :to="tab_list.aLink">
                <img :src="tab_list.aImages" alt="">
                <div class=" same-three" :class="sstt[index]">
                  <div class="city">{{tab_list.aTitle}}</div>
                  <div class="split-line">|</div>
                  <div class="price">${{tab_list.aPrice}}</div>
                </div>
              </router-link>
            </div>
          </div>
        </div>
 

js:

data() {
      return {
          sstt:[
            "ss1",
            "ss2",
            "ss3",
          ],

css:

.ss1{
    background: red;
  }
  .ss2{
    background: yellow;
  }
  .ss3{
    background: black;
  }

注意：1.v-for 要寫index  不然sstt[index] 會報錯，index不存在。

           2.sstt是一個數組，裡面的三個樣式名要用“”包裹，不然會當做一個變數，報錯