如何在 vuetify 中不循环卡片中的特定项目答案

【问题标题】：How to not loop a particular item in a card in vuetify如何在 vuetify 中不循环卡片中的特定项目
【发布时间】：2021-11-20 10:09:44
【问题描述】：

任何人都可以帮助我...我只想在 card-1 中显示 card-title。我不想在 card-2 card-3 和 card-4 中显示卡片标题。

<v-app>
    <v-row v-for="(item, index) in list" :key="index">
      <v-col cols="12">
        <v-card>
          <v-card-title>
            <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'}]
    }
  }

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

使用v-if，您可以检查index：

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: () => ({
    list:[ {name:'apple1', avatarText:'Abc'}, {name:'apple2'}, {name:'apple3'}, {name:'apple4'} ]
  })
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<v-app id="app">
  <v-row v-for="(item, index) in list" :key="index">
    <v-col cols="12">
      <v-card>
        <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>

【讨论】：