vue根据v-for的index渲染class的方法

以前使用vue的列表渲染时，总会纠结如何把index插入给各个class，从而进行类名排列，现在给大家介绍个方法，举例：

// 列表数据
peopleArr: [
    "张三",
    "李四",
    "王五"
];

这个列表使用v-for放入标签中十分简单：

<ul>
    <li v-for="(item,index) in peopleArr" :key="index">{{item}}</li>
</ul>

OK，搞定了。
但现在有个需求，我想按照数组peopleArr的index，给所有的li标签添加类名，分别为li01、li02、li03，那该怎么办呢？
直接上代码：

<!--template中的ul、li标签-->
<ul>
    <li v-for="(item,index) in peopleArr" :key="index" :class="generateClassName(index)">{{item}}</li>
</ul>

// JS中的methods
export default{
    ...
    methods: {
        generateClassName(index){
            return "li0" + (index+1);
        }
    }
}

通过对class进行v-bind，然后以generateClassName方法返回数值的形式来产生类名，这样我们就可以在视图中看到li01、li02、li03了。