Vue.js实现用户卡片列表

应用场景

该代码适用于需要在Web应用程序中显示用户卡片列表的场景，例如用户管理系统、社交媒体平台或电子商务网站。

代码基本功能

该代码片段提供了一个响应式用户卡片列表，其中包含每个用户的姓名、职业、照片、价格和折扣信息。它还允许用户查看有关每个用户的更多详细信息。

功能实现步骤及关键代码分析

1. HTML模板

<template>
  <div>
    <div class="bg-gray-100">
      <div class="max-w-2xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
        <div class="max-w-3xl mx-auto grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
          <!-- 用户卡片 -->
          <div class="flex flex-col overflow-hidden rounded-lg shadow-lg">
            <div class="flex-1 bg-white p-6 flex flex-col justify-between">
              <div class="flex items-start">
                <div class="flex-shrink-0">
                  <img class="h-10 w-10 rounded-full" src="https://source.unsplash.com/random/40x40" alt="" />
                </div>
                <div class="ml-4">
                  <div class="text-sm font-medium text-gray-900">{{ user.name }}</div>
                  <div class="text-sm text-gray-500">{{ user.occupation }}</div>
                </div>
              </div>
              <div class="flex-1 flex items-end justify-between text-sm">
                <div class="text-gray-900">{{ user.price }}</div>
                <p class="text-gray-500">{{ user.discount }}</p>
              </div>
            </div>
            <div class="flex-shrink-0 p-4 bg-gray-50">
              <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">View Details</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

HTML模板定义了用户卡片列表的结构和样式。每个卡片包含用户头像、姓名、职业、价格、折扣信息和一个查看详细信息的链接。

2. JavaScript代码

<script lang="tsx" setup>
import { ref } from 'vue'

const address = ref('222 Mourning Dove Ct, Masteri, CA 92620')
const paymentMethods = ref([
  {
    type: 'credit-card',
    last4: '4242',
    provider: 'visa',
    isDefault: true,
  },
  {
    type: 'credit-card',
    last4: '8888',
    provider: 'mastercard',
    isDefault: false,
  },
])

const handleSetDefaultPaymentMethod = (paymentMethod) => {
  paymentMethods.value = paymentMethods.value.map((pm) => {
    if (pm === paymentMethod) {
      return { ...pm, isDefault: true }
    }
    return { ...pm, isDefault: false }
  })
}
</script>

JavaScript代码使用Vue.js的ref钩子管理用户列表和支付方式数据。它还定义了handleSetDefaultPaymentMethod函数，用于设置默认支付方式。

3. CSS样式

<style>
/* 省略部分CSS样式 */
</style>

CSS样式定义了用户卡片列表的外观和响应式行为。

总结与展望

开发这段代码的过程让我熟悉了Vue.js的响应式数据绑定、组件化和事件处理功能。未来，该卡片功能可以进一步拓展和优化，例如：

• 添加对分页和排序的支持
• 允许用户编辑和删除卡片
• 使用更复杂的数据源（如API）
• 实现卡片的拖放功能