Vuetify —— 使用 v-list 组件

最新推荐文章于 2023-10-17 18:02:34 发布

贝塔贝卡贝

最新推荐文章于 2023-10-17 18:02:34 发布

阅读量2.8k

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/Kiruthika/article/details/121724553

版权

这个示例展示了如何在Vue.js中创建一个卡片组件，包含一个可点击的列表项，用于显示'Reports'类别下的不同选项，如'Real-Time', 'Audience', 'Conversions'等。当用户点击列表项时，会触发'curText'方法并在控制台打印所选文本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<template>
  <v-card
    class="mx-auto"
    max-width="300"
    tile
  >
    <v-list rounded>
      <v-subheader>REPORTS</v-subheader>
      <v-list-item-group
        v-model="selectedItem"
        color="primary"
      >
        <v-list-item
          v-for="item in items"
          :key="item.text"
          @click="curText(item.text)"
        >
          <v-list-item-icon>
            <v-icon v-text="item.icon"></v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title v-text="item.text"></v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>
  </v-card>
</template>
export default {
  data() (
	  return {
	    selectedItem: 1,
	    items: [
	      { text: 'Real-Time', icon: 'mdi-clock' },
	      { text: 'Audience', icon: 'mdi-account' },
	      { text: 'Conversions', icon: 'mdi-flag' },
	    ],
	  }
  ),
  methods:{
	curText(text){
		console.log(text)
	}
  }
}