vue实现赛程表

Vue 实现赛程表

赛程表通常用于展示比赛、会议或其他活动的安排。以下是使用 Vue 实现赛程表的具体方法。

数据结构设计

赛程表的核心是数据结构和展示逻辑。通常需要定义比赛的时间、对阵双方、比分等信息。

data() {
  return {
    schedule: [
      {
        date: '2023-10-01',
        matches: [
          { homeTeam: 'Team A', awayTeam: 'Team B', score: '2-1' },
          { homeTeam: 'Team C', awayTeam: 'Team D', score: '0-0' }
        ]
      },
      {
        date: '2023-10-02',
        matches: [
          { homeTeam: 'Team E', awayTeam: 'Team F', score: '1-3' }
        ]
      }
    ]
  }
}

模板渲染

使用 Vue 的模板语法渲染赛程表，可以通过 v-for 循环嵌套实现日期和比赛的展示。

<div v-for="day in schedule" :key="day.date">
  <h3>{{ day.date }}</h3>
  <ul>
    <li v-for="match in day.matches" :key="match.homeTeam + match.awayTeam">
      {{ match.homeTeam }} vs {{ match.awayTeam }}: {{ match.score }}
    </li>
  </ul>
</div>

样式优化

通过 CSS 美化赛程表，使其更符合视觉需求。可以添加表格布局或卡片样式。

.schedule-day {
  margin-bottom: 20px;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 5px;
}

.match-item {
  padding: 8px;
  border-bottom: 1px solid #eee;
}

动态交互

如果需要支持用户交互（如点击查看详情），可以通过 Vue 的事件绑定实现。

<li 
  v-for="match in day.matches" 
  :key="match.homeTeam + match.awayTeam"
  @click="showMatchDetails(match)"
>
  {{ match.homeTeam }} vs {{ match.awayTeam }}: {{ match.score }}
</li>

methods: {
  showMatchDetails(match) {
    alert(`Match details: ${match.homeTeam} vs ${match.awayTeam}`);
  }
}

使用第三方库

如果需要更复杂的赛程表功能（如日历视图），可以集成第三方库如 FullCalendar 或 Vuetify。

import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';

export default {
  components: { FullCalendar },
  data() {
    return {
      calendarOptions: {
        plugins: [dayGridPlugin],
        initialView: 'dayGridMonth',
        events: [
          { title: 'Match 1', date: '2023-10-01' },
          { title: 'Match 2', date: '2023-10-02' }
        ]
      }
    }
  }
}

响应式设计

确保赛程表在不同设备上正常显示，可以通过媒体查询或使用响应式框架（如 Bootstrap Vue）实现。

@media (max-width: 768px) {
  .schedule-day {
    padding: 5px;
  }
}

通过以上方法，可以快速实现一个功能完善且美观的赛程表。