问：

我按在要在template中v-for循环遍历这个centrerTopdata，我希望自循环前面三个就可以了怎么写？

回答：

问：

<div v-for="(item, index) in centrerTopdata.slice(0, 3)" :key="index"> div class=‘left-png-${index}’这个写对吗？应该怎么写？ </div>

回答：

你的写法有一些语法错误。在 Vue.js 模板中，动态绑定类名时需要使用 v-bind 或者简写 :。以下是正确的写法：

html
<div v-for="(item, index) in centrerTopdata.slice(0, 3)" :key="index">
  <div :class="'left-png-' + index">
    {{ item }}
  </div>
</div>
在这个示例中，:class 用于动态绑定类名，'left-png-' + index 会将 index 的值拼接到类名中，形成 left-png-0、left-png-1、left-png-2 等。

完整的代码示例如下：

html
<template>
  <div>
    <div v-for="(item, index) in centrerTopdata.slice(0, 3)" :key="index">
      <div :class="'left-png-' + index">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      centrerTopdata: [
        // 你的数据
      ]
    };
  }
};
</script>
这样，每个 div 元素都会有一个动态生成的类名，根据其索引值