技术博客：动态创建价格计划卡片

应用场景介绍

本技术博客展示如何使用 Vue.js 动态创建价格计划卡片，使开发人员能够根据需要轻松地向他们的应用程序添加定价信息。

代码基本功能介绍

此代码片段提供了一个交互式界面，允许用户查看和选择不同的定价计划。每个计划都具有标题、价格和一系列功能。用户可以单击“开始试用”按钮以启动计划。

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

1. 初始化数据

const plans = ref([
  {
    title: 'Individual',
    price: 68,
    features: [
      {
        name: 'Add more than 5 Experiments',
        available: false,
      },
      {
        name: 'Add colleagues to your team',
        available: false,
      },
      {
        name: 'Unlimited photo upload',
        available: false,
      },
    ],
  },
  {
    title: 'Business',
    price: 86,
    features: [
      {
        name: 'Add more than 5 Experiments',
        available: true,
      },
      {
        name: 'Add colleagues to your team',
        available: true,
      },
      {
        name: 'Unlimited photo upload',
        available: true,
      },
    ],
  },
]);

此代码使用 Vue.js 的 ref() 函数初始化一个可变的响应式数据对象，其中包含两个价格计划的详细信息。每个计划都有一个标题、价格和一个功能列表。

2. 创建卡片模板

<template>
  <div class="bg-white">
    <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
      <div class="max-w-3xl mx-auto">
        <div class="flex justify-between items-center">
          <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
            Plans
          </h2>
          <button type="button" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500">
            <svg xmlns="http://www.w3.org/2000/svg" class="-ml-1 mr-2 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
            Close
          </button>
        </div>
        <div class="mt-8">
          <div class="rounded-lg shadow-md">
            <div class="p-6">
              <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                <div class="relative rounded-lg border border-gray-200 p-6 flex flex-col justify-between">
                  <div>
                    <h3 class="text-xl font-semibold leading-6 text-gray-900">
                      Individual
                    </h3>
                    <p class="mt-1 text-sm text-gray-500">
                      $68 / year
                      <span class="font-medium text-gray-900">($8.8 / month)</span>
                    </p>
                  </div>
                  <div class="mt-6">
                    <ul role="list" class="space-y-2">
                      <li class="flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                        </svg>
                        <span class="ml-3 text-sm text-gray-700">
                          Add more than 5 Experiments
                        </span>
                      </li>
                      <li class="flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                        </svg>
                        <span class="ml-3 text-sm text-gray-700">
                          Add colleagues to your team
                        </span>
                      </li>
                      <li class="flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                        </svg>
                        <span class="ml-3 text-sm text-gray-700">
                          Unlimited photo upload
                        </span>
                      </li>
                    </ul>
                  </div>
                  <a href="#" class="mt-6 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500">
                    Start Trial
                  </a>
                </div>
                <div class="relative rounded-lg border border-gray-200 p-6 flex flex-col justify-between">
                  <div>
                    <h3 class="text-xl font-semibold leading-6 text-gray-900">
                      Business
                    </h3>
                    <p class="mt-1 text-sm text-gray-500">
                      $86 / year
                      <span class="font-medium text-gray-900">($8.8 / month)</span>
                    </p>
                  </div>
                  <div class="mt-6">
                    <ul role="list" class="space-y-2">
                      <li class="flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                        </svg>
                        <span class="ml-3 text-sm text-gray-700">
                          Add more than 5 Experiments
                        </span>
                      </li>
                      <li class="flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                        </svg>
                        <span class="ml-3 text-sm text-gray-700">
                          Add colleagues to your team
                        </span>
                      </li>
                      <li class="flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="