vue.js - 如何不在 vuetify 中循环卡片中的特定项目

Question

谁能帮帮我……我只想在卡片 1 中显示卡片标题。我不想在 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'}]
    }
  }

Answer 1

使用v-if，您可以检查索引:

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>