vue实现车次信息

Vue 实现车次信息功能

数据准备与结构设计

使用 Vue 的响应式特性管理车次数据，通常以数组形式存储车次信息。每个车次对象包含基础属性：

data() {
  return {
    trains: [
      {
        id: 'G123',
        from: '北京',
        to: '上海',
        departure: '08:00',
        arrival: '12:30',
        duration: '4小时30分',
        price: 553,
        seats: {
          business: 20,
          first: 50,
          second: 200
        }
      }
    ]
  }
}

列表渲染与过滤

通过 v-for 指令渲染车次列表，结合计算属性实现筛选功能：

<template>
  <div class="train-list">
    <input v-model="searchQuery" placeholder="搜索车次/站点">
    <div v-for="train in filteredTrains" :key="train.id" class="train-item">
      <h3>{{ train.id }}</h3>
      <p>{{ train.from }} → {{ train.to }}</p>
    </div>
  </div>
</template>

<script>
computed: {
  filteredTrains() {
    return this.trains.filter(train => 
      train.id.includes(this.searchQuery) || 
      train.from.includes(this.searchQuery) ||
      train.to.includes(this.searchQuery)
    )
  }
}
</script>

详细视图与组件化

采用组件拆分策略提升可维护性：

components: {
  'train-card': {
    props: ['train'],
    template: `
      <div class="train-card">
        <div class="route">{{ train.from }}-{{ train.to }}</div>
        <div class="time">{{ train.departure }}发车</div>
      </div>
    `
  }
}

状态管理与交互

通过 Vuex 管理全局状态（适用于大型应用）：

// store.js
export default new Vuex.Store({
  state: {
    allTrains: []
  },
  mutations: {
    SET_TRAINS(state, payload) {
      state.allTrains = payload
    }
  }
})

数据持久化与API集成

使用 axios 获取远程数据：

methods: {
  async fetchTrains() {
    try {
      const res = await axios.get('/api/trains')
      this.trains = res.data
    } catch (error) {
      console.error('获取车次数据失败', error)
    }
  }
},
created() {
  this.fetchTrains()
}

样式与布局建议

采用 flex 布局实现响应式设计：

.train-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.train-item {
  flex: 1 0 300px;
  border: 1px solid #eee;
  padding: 15px;
}

性能优化技巧

1. 对长列表使用虚拟滚动（如 vue-virtual-scroller）
2. 复杂计算属性使用缓存
3. 路由懒加载车次详情组件
4. 使用 keep-alive 缓存常用视图

扩展功能实现

添加排序功能示例：

computed: {
  sortedTrains() {
    return [...this.filteredTrains].sort((a, b) => 
      this.sortBy === 'time' ? 
        a.duration.localeCompare(b.duration) : 
        a.price - b.price
    )
  }
}