VueJS实践:怎么给v-for之后的每个节点都添加不同的样式

1>

<ul> <li v-for="n in 6" :class="'item'+n">{{n}}</li> </ul>

2>
每个节点应该定义了type

<div v-for="item in list" class={'classA': item.type === 'type1', 'classB': item.type === 'type2'}>node</div>

3>
比如我们有一个列表，我们希望能显示我们当前选中的那一个，如何实现呢？
基本思路是通过$index来判断是否是当前迭代对象，然后去增减class或者style来实现不同的样式

<ul>
  <!-- 方法1 class-->
  <li v-for="item in list" :class="{'active': $index === activeId}">{{item}}</li>
  
  <!-- 方法2 style-->
  <li v-for="item in list" :style="{backgroundColor: $index === activeId ? 'red' : 'white'}">{{item}}</li>
</ul>

data () {
  return {
    list: ['a', 'b', 'c'],
    activeId: 0
  }
},