Vuetify中v-for渲染卡片时如何仅给首张卡片显示card-title

核心思路是利用v-for提供的索引值做条件渲染，仅在第一个元素对应的卡片上渲染v-card-title模块。

你只需要在原代码的v-card-title标签上添加v-if="index === 0"的判断即可，修改后的完整代码如下：

<template>
  <v-app>
    <v-row v-for="(item, index) in list" :key="index">
      <v-col cols="12">
        <v-card>
          <!-- 仅索引为0的第一张卡片渲染title模块 -->
          <v-card-title v-if="index === 0">
            <v-avatar size="60" color='primary'>{{item.avatarText}}</v-avatar>
          </v-card-title>
          <v-card-text>{{item.name}}</v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-app>
</template>
<script>
export default{
  data(){
    return{
      list:[
        {name:'apple1',avatarText:'Abc'},
        {name:'apple2'},
        {name:'apple3'},
        {name:'apple4'}
      ]
    }
  }
}
</script>

逻辑说明 #

• v-for遍历的索引值默认从0开始计数，第一个匹配到的元素索引就是0
• 条件判断会直接控制模块是否渲染，其余卡片的v-card-title模块不会生成对应的DOM节点，性能开销可以忽略
• 如果后续需要调整显示标题的卡片位置，只需要修改判断条件的索引值即可，比如要让第二张卡片显示标题，改为index === 1即可
• 如果担心数据异常，可以扩展判断条件为v-if="index === 0 && item.avatarText"，避免空值渲染问题

内容的提问来源于stack exchange，提问作者Maseeha Tasneem