怎么用vue对歌曲时长进行排序代码

在Vue中对歌曲时长进行排序的代码可以如下所示：

<template>
  <div>
    <h2>Songs</h2>
    <button @click="sortSongs">Sort by Duration</button>
    <ul>
      <li v-for="song in sortedSongs" :key="song.id">
        {{ song.title }} - {{ song.duration }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      songs: [
        { id: 1, title: 'Song 1', duration: '3:45' },
        { id: 2, title: 'Song 2', duration: '4:20' },
        { id: 3, title: 'Song 3', duration: '3:15' },
        // Add more songs here
      ],
    };
  },
  computed: {
    sortedSongs() {
      return this.songs.slice().sort((a, b) => {
        // Split the duration into minutes and seconds
        const [aMinutes, aSeconds] = a.duration.split(':').map(Number);
        const [bMinutes, bSeconds] = b.duration.split(':').map(Number);
        
        // Compare the durations
        if (aMinutes === bMinutes) {
          return aSeconds - bSeconds;
        } else {
          return aMinutes - bMinutes;
        }
      });
    },
  },
  methods: {
    sortSongs() {
      this.songs.sort((a, b) => {
        // Split the duration into minutes and seconds
        const [aMinutes, aSeconds] = a.duration.split(':').map(Number);
        const [bMinutes, bSeconds] = b.duration.split(':').map(Number);
        
        // Compare the durations
        if (aMinutes === bMinutes) {
          return aSeconds - bSeconds;
        } else {
          return aMinutes - bMinutes;
        }
      });
    },
  },
};
</script>

在上述代码中，我们假设`songs`数组包含了一些歌曲对象，其中每个对象包含了`id`、`title`和`duration`属性。我们使用`computed`属性`sortedSongs`来获取根据歌曲时长排序后的歌曲列表，并在模板中使用`v-for`指令来遍历显示排序后的歌曲。

点击按钮时，会调用`sortSongs`方法来对`songs`数组进行原地排序。在排序函数中，我们将歌曲时长转换为分钟和秒，并根据分钟和秒的值进行比较，以实现按照歌曲时长排序的功能。

请注意，以上代码仅供参考，并假设你已经正确设置了Vue环境和绑定了Vue实例。具体的实现可能会根据你的需求和数据结构有所不同。