使用Vue JS为数组中的每个卡创建具有Modal的卡

的实现方法如下：

首先，确保你已经引入了Vue和Vue Bootstrap库。可以通过在HTML文件中引入以下CDN链接来实现：

<!-- Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- Vue Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

在Vue的data中定义一个包含卡片内容的数组。每个卡片对象应该包含标题、描述等属性。

data() {
  return {
    cards: [
      { 
        title: 'Card 1',
        description: 'This is card 1 description.'
      },
      {
        title: 'Card 2',
        description: 'This is card 2 description.'
      },
      // 可以继续添加更多的卡片对象
    ],
    selectedCard: null // 用于记录当前选中的卡片对象
  }
}

在Vue的模板中使用v-for指令循环渲染每个卡片，并将每个卡片绑定到selectedCard属性上。

<div>
  <div class="card" v-for="card in cards" :key="card.title">
    <div class="card-body">
      <h5 class="card-title">{{ card.title }}</h5>
      <p class="card-text">{{ card.description }}</p>
      <button class="btn btn-primary" @click="selectedCard = card">查看详情</button>
    </div>
  </div>
</div>

添加一个Modal组件，用于显示选中卡片的详细信息。使用v-if指令根据selectedCard属性的值决定是否显示Modal。

<!-- 在Vue组件的模板中添加以下代码 -->
<div>
  <!-- 省略其他内容 -->

  <!-- Modal -->
  <div class="modal" tabindex="-1" role="dialog" v-if="selectedCard">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">{{ selectedCard.title }}</h5>
          <button type="button" class="close" @click="selectedCard = null">
            <span>&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>{{ selectedCard.description }}</p>
          <!-- 添加其他详细信息 -->
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" @click="selectedCard = null">关闭</button>
        </div>
      </div>
    </div>
  </div>
</div>

以上代码将为数组中的每个卡片创建一个带有Modal的卡片，并实现了点击按钮显示卡片详细信息的功能。

推荐的腾讯云相关产品和产品介绍链接地址：