技術標籤：vue.jsjavascript

v-for為單個元素設定樣式

v-for元件可以迴圈渲染一堆元件。但是在設定樣式時，有為單獨的某一個元素設定特定的樣式以達到高亮的目的這樣的需求。

<card-grid
        style="width:25%; text-align: center"
        v-for="(item,i) in menuItems"
        :key="i"
        ref="items"
        :style="i === itemIndex ? chosenStyle:'' "
 

      >
        {{ item.name }}
      </card-grid>

itemIndex作為需要被單獨設定樣式的序列，當i渲染時和itemIndex相等時，此時會將元件單獨設定一個:style = 'chosenStyle',即可達到相應的效果。