Vue2 实战：一步步打造电商套餐选择页面，附详细代码与样式解析」「从零开始构建套餐购买页面：Vue2+HTML+CSS 新手教程」「适合期末大作业！用 Vue2 实现带价格显示的套餐卡片页面」

效果图

在这里插入图片描述

教程目录

引言
- 介绍项目的目标和实际应用
- Vue2 的使用优势
项目结构与准备
- 项目结构说明
- Vue 和基础 HTML 模板的引入
创建卡片页面布局
- 搭建页面结构，包括套餐卡片的容器与卡片样式
- 使用 CSS 定义卡片样式
动态数据绑定
- 使用 v-for 和 v-model 生成动态数据
- 创建 products 数组以存储每个套餐的数据
实现套餐内容的展示
- 使用 v-for 循环展示卡片内容：套餐名称、限时标签、功能列表等
- 添加套餐规格选择下拉框
价格信息的固定底部布局
- 用 Flexbox 固定价格和购买按钮在卡片底部
- 使用 position 和 flex-direction 排版价格、原价和购买按钮
购买按钮的点击事件
- 使用 @click 绑定事件
- 弹出购买确认信息的提示
总结与进一步优化
- 总结实现的功能
- 提供进一步的优化建议，如添加表单验证和更多交互

博客正文示例

1. 引言

在本教程中，我们将使用 Vue2 来构建一个带有套餐选择、价格显示和购买功能的卡片页面。这种设计非常适合电商项目中的套餐或会员服务页面。通过本项目，您将学会如何使用 Vue2 和 CSS 构建响应式且功能齐全的页面。

2. 项目结构与准备

首先，我们在 HTML 文件中引入 Vue2 的 CDN 链接，并为卡片页面创建一个 #app 容器。以下是项目的基础结构：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>套餐选择页面 - Vue 示例</title>
  <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>

3. 创建卡片页面布局

在 #app 中创建一个 .products 容器，并使用 .card 元素来表示每个套餐卡片。接着，为每个卡片设计基本的 CSS 样式。

<div id="app">
  <div class="products">
    <div class="card" v-for="product in products" :key="product.id">
      <!-- 卡片内容结构 -->
    </div>
  </div>
</div>

4. 动态数据绑定

在 Vue 实例中创建 products 数组，存储每个套餐的名称、价格、功能等信息，并在 data 中初始化。

data: {
    
    
  products: [
    {
    
    
      id: 1,
      name: "响应式建站1年",
      features: ["免费模板200+", "功能控件50+", "多端自适应"],
      price: 9.90,
      originalPrice: 500.00
    },
    // 更多产品
  ]
}

5. 实现套餐内容的展示

通过 v-for 将 products 数组中的每个套餐动态渲染到页面上，展示内容包括名称、功能列表等。我们可以使用 <ul class="feature-list"> 来显示每个套餐的功能。

<ul class="feature-list">
  <li v-for="feature in product.features" :key="feature">{
   
   { feature }}</li>
</ul>

6. 价格信息的固定底部布局

为了让价格和购买按钮固定在卡片底部，我们在 .card 内使用 display: flex 和 flex-direction: column，并在 .card-footer 内使用 margin-top: auto。

<div class="card-footer">
  <div class="price">{
   
   { product.price }}元</div>
  <div class="original-price">原价 {
   
   { product.originalPrice }}元</div>
  <button class="buy-button" @click="buyProduct(product)">立即购买</button>
</div>

7. 购买按钮的点击事件

我们为“立即购买”按钮添加 @click 事件，在点击时触发 buyProduct 方法并弹出提示信息。

methods: {
    
    
  buyProduct(product) {
    
    
    alert(`您选择了购买 ${
      
      product.name}，价格为 ${
      
      product.price} 元`);
  }
}

8. 总结与进一步优化

本项目实现了一个包含动态内容、价格展示和按钮事件的套餐选择页面。您可以继续优化样式、添加更多的卡片内容、甚至接入后台数据，实现更复杂的页面效果。

这篇博客教程帮助读者深入理解 Vue2 和 Flexbox 的应用，通过完整代码和细致讲解，读者可以在项目中轻松实现类似的功能。希望这篇教程能对前端新手有所帮助！

完整代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>套餐选择页面 - Vue 示例</title>
  <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
  <style>
    body {
      
      
      font-family: Arial, sans-serif;
      background-color: #f8f8f8;
      margin: 0;
      padding: 20px;
    }
    #app {
      
      
      max-width: 1200px;
      margin: auto;
    }
    .header {
      
      
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 20px;
    }
    .products {
      
      
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .card {
      
      
      width: 200px;
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
    }
    .card-header {
      
      
      font-weight: bold;
      font-size: 18px;
      margin-bottom: 10px;
      text-align: center;
    }
    .limited-tag {
      
      
      position: absolute;
      top: 10px;
      right: 10px;
      background-color: #f76c6c;
      color: #fff;
      padding: 4px 8px;
      font-size: 12px;
      border-radius: 4px;
    }
    .feature-list {
      
      
      list-style: none;
      padding: 0;
      margin: 10px 0 20px;
      color: #666;
    }
    .feature-list li {
      
      
      padding: 5px 0;
    }
    .dropdown {
      
      
      margin-bottom: 15px;
      text-align: center;
    }
    select {
      
      
      width: 100%;
      padding: 8px;
      font-size: 14px;
      border-radius: 4px;
      border: 1px solid #ddd;
    }
    /* 固定底部价格和按钮 */
    .card-footer {
      
      
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: auto;
    }
    .price {
      
      
      color: #f76c6c;
      font-size: 24px;
      font-weight: bold;
      margin: 5px 0;
    }
    .original-price {
      
      
      font-size: 14px;
      color: #999;
      text-decoration: line-through;
      margin-bottom: 10px;
    }
    .buy-button {
      
      
      width: 100%;
      padding: 10px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      cursor: pointer;
    }
    .buy-button:hover {
      
      
      background-color: #45a049;
    }
  </style>
</head>
<body>
<div id="app">
  <div class="header">建站明星产品，数万用户的共同选择</div>
  <div class="products">
    <div class="card" v-for="product in products" :key="product.id">
      <div class="card-header">{
   
   { product.name }}</div>
      <div class="limited-tag" v-if="product.limited">{
   
   { product.limitedText }}</div>
      <ul class="feature-list">
        <li v-for="feature in product.features" :key="feature">{
   
   { feature }}</li>
      </ul>
      <div class="dropdown">
        <select v-model="product.selectedSpec">
          <option v-for="spec in product.specs" :key="spec" :value="spec">{
   
   { spec }}</option>
        </select>
      </div>
      <!-- 固定在卡片底部的价格和按钮 -->
      <div class="card-footer">
        <div class="price">{
   
   { product.price }}元</div>
        <div class="original-price" v-if="product.originalPrice">原价 {
   
   { product.originalPrice }}元</div>
        <button class="buy-button" @click="buyProduct(product)">立即购买</button>
      </div>
    </div>
  </div>
</div>

<script>
  new Vue({
      
      
    el: '#app',
    data: {
      
      
      products: [
        {
      
      
          id: 1,
          name: "响应式建站1年",
          limited: true,
          limitedText: "限时秒杀",
          features: ["免费模板200+", "功能控件50+", "可视化页面编辑，多端自适应", "支持PC端、移动端"],
          specs: ["初创版", "专业版"],
          selectedSpec: "初创版",
          price: 9.90,
          originalPrice: 500.00
        },
        {
      
      
          id: 2,
          name: "企业门户-入门版1年",
          limited: true,
          limitedText: "新用户专享",
          features: ["免费模板3300+", "页面创建数20", "功能控件100+", "支持PC端、移动端"],
          specs: ["入门版", "标准版"],
          selectedSpec: "入门版",
          price: 368.00,
          originalPrice: 698.00
        },
        {
      
      
          id: 3,
          name: "企业门户",
          limited: true,
          limitedText: "1年9折",
          features: ["支持一端设计，多端适配", "多版本可选"],
          specs: ["入门版", "标准版", "高级版"],
          selectedSpec: "入门版",
          price: 628.20,
          originalPrice: 698.00
        },
        {
      
      
          id: 4,
          name: "企业门户-定制建站",
          limited: true,
          limitedText: "定制设计9折",
          features: ["资深设计师团队，全程1对1服务", "原创设计，个性化定制网站", "丰富功能插件，稳定快捷", "建站周期短，上线效率高"],
          specs: ["基础版", "豪华版"],
          selectedSpec: "基础版",
          price: 3582.00,
          originalPrice: 3980.00
        }
      ]
    },
    methods: {
      
      
      buyProduct(product) {
      
      
        alert(`您选择了购买${ 
        product.name} - ${ 
        product.selectedSpec}，价格为${ 
        product.price}元`);
      }
    }
  });
</script>
</body>
</html>