v-for循环默认显示第一项

回答: 要实现v-for循环默认显示第一项，可以在data中设置一个active变量，并将其初始值设为0，表示默认选中第一项。然后在循环的标签中使用:class属性来判断当前项是否为选中项，如果是则添加activeClass类名，否则不添加类名。在点击事件中，通过改变active的值来改变选中项的样式。具体代码如下所示:

<template>
  <div>
    <div v-for="(item, index) in 数组名" :key="index" :class="active === index ? 'activeClass' : ''">
      <div @click="change(index)"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0 // 默认选中第一项
    }
  },
  methods: {
    change(index) {
      this.active = index; // 把index值赋给active，点击改变样式
    }
  }
}
</script>

<style>
.activeClass {
  color: #ca151e;
  border: 1px solid #ca151e;
}
</style>

在上述代码中，v-for循环遍历数组名，使用:class属性来判断当前项是否为选中项，如果是则添加activeClass类名，否则不添加类名。点击事件change(index)会将当前项的索引值赋给active，从而改变选中项的样式。
#### 引用[.reference_title]
- *1* [v-for循环，点击更改按钮样式，默认选中第一个](https://blog.csdn.net/weixin_41599291/article/details/92825484)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [vue设置v-for遍历，默认选中第一个样式，点击切换时，样式选中一起发生变化](https://blog.csdn.net/qq_36509946/article/details/119998632)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]