vue实现动态名次排行

实现动态名次排行的基本思路

在Vue中实现动态名次排行，通常需要结合数据绑定和排序功能。核心是利用Vue的响应式特性，当数据变化时自动更新视图中的排名。

数据准备与排序

准备一个包含排名数据的数组，每个元素应包含唯一标识、分数或其他排序依据。使用计算属性对数据进行实时排序：

data() {
  return {
    items: [
      { id: 1, name: '张三', score: 85 },
      { id: 2, name: '李四', score: 92 },
      { id: 3, name: '王五', score: 78 }
    ]
  }
},
computed: {
  rankedItems() {
    return [...this.items]
      .sort((a, b) => b.score - a.score)
      .map((item, index) => ({
        ...item,
        rank: index + 1
      }))
  }
}

模板渲染

在模板中使用v-for渲染排序后的数据，显示名次：

<table>
  <tr v-for="item in rankedItems" :key="item.id">
    <td>{{ item.rank }}</td>
    <td>{{ item.name }}</td>
    <td>{{ item.score }}</td>
  </tr>
</table>

动态更新实现

要实现动态更新效果，可以通过定时器或WebSocket等方式更新数据源。当items数组发生变化时，rankedItems会自动重新计算：

mounted() {
  setInterval(() => {
    this.items.forEach(item => {
      item.score += Math.floor(Math.random() * 5) - 2 // 随机增减分数
    })
  }, 2000)
}

优化显示效果

为增强用户体验，可以添加过渡效果和变化高亮：

<transition-group name="list" tag="tbody">
  <tr v-for="item in rankedItems" :key="item.id" 
      :class="{ 'highlight': item.scoreChanged }">
    <td>{{ item.rank }}</td>
    <td>{{ item.name }}</td>
    <td>{{ item.score }}</td>
  </tr>
</transition-group>

.list-move {
  transition: transform 0.5s;
}
.highlight {
  background-color: #ffeb3b;
  transition: background-color 1s;
}

处理并列排名

如果需要处理分数相同的并列情况，可以修改排序逻辑：

rankedItems() {
  const sorted = [...this.items].sort((a, b) => b.score - a.score)
  let rank = 1
  return sorted.map((item, index) => {
    if (index > 0 && sorted[index-1].score !== item.score) {
      rank = index + 1
    }
    return {
      ...item,
      rank
    }
  })
}

完整组件示例

<template>
  <div>
    <h3>实时排名</h3>
    <table>
      <thead>
        <tr>
          <th>排名</th>
          <th>姓名</th>
          <th>分数</th>
        </tr>
      </thead>
      <transition-group name="list" tag="tbody">
        <tr v-for="item in rankedItems" :key="item.id" 
            :class="{ 'highlight': item.scoreChanged }">
          <td>{{ item.rank }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.score }}</td>
        </tr>
      </transition-group>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '张三', score: 85, scoreChanged: false },
        { id: 2, name: '李四', score: 92, scoreChanged: false },
        { id: 3, name: '王五', score: 78, scoreChanged: false }
      ]
    }
  },
  computed: {
    rankedItems() {
      const sorted = [...this.items].sort((a, b) => b.score - a.score)
      let rank = 1
      return sorted.map((item, index) => {
        if (index > 0 && sorted[index-1].score !== item.score) {
          rank = index + 1
        }
        return {
          ...item,
          rank
        }
      })
    }
  },
  mounted() {
    setInterval(() => {
      this.items.forEach(item => {
        const oldScore = item.score
        item.score += Math.floor(Math.random() * 5) - 2
        item.scoreChanged = oldScore !== item.score
        setTimeout(() => item.scoreChanged = false, 1000)
      })
    }, 2000)
  }
}
</script>

<style>
.list-move {
  transition: transform 0.5s;
}
.highlight {
  background-color: #ffeb3b;
  transition: background-color 1s;
}
</style>