前提：

有一個列表，使用 v-for 循環(huán)出來，點擊哪一項，哪一項文字變色，這個功能很好實現(xiàn)，寫好 active 類之后，在 html 中直接綁定即可，例如：

html:

<ul>
  <li v-for="(item, index) in list"
    :class="{'active': index === nowIndex}"
    @click="selectOne(index)">
    {{ item.name }}
  </li>
</ul>

js:

selectOne (index) {
  this.nowIndex = index
}

css:

.active {
  color: '#428bca';
}

但是現(xiàn)在問題是，這個色值是服務(wù)器傳過來的值，所以只能用如下方法：

html:

<div>
  <ul>
    <li v-for="(item, index) in list" :key="item.id" @click="selectOne(index)">
      <span v-if="index === nowIndex" :style="{color: themeColor}">{{ item.name }}</span>
      <span v-else>{{ item.name }}</span>
    </li>
  </ul>
</div>

js:

data () {
  return {
    themeColor: '#428bca',
    nowIndex: 0,
    list: [
      {id: 1, name: 'apple'},
      {id: 2, name: 'banana'},
      {id: 3, name: 'orange'}
    ]
  }
},
methods: {
  selectOne (index) {
    this.nowIndex = index
  }
}

不知道有沒有更加簡單的寫法或者其他的寫法可以實現(xiàn)呢？