用vue写一个网易云推荐页面
时间: 2023-12-09 09:06:40 浏览: 28
好的,下面是一个简单的Vue网易云推荐页面的示例代码:
```html
<template>
<div class="recommendations">
<h1>网易云音乐推荐</h1>
<div class="recommendation-list">
<div v-for="song in songs" :key="song.id" class="song">
<img :src="song.picUrl" alt="song cover">
<div class="song-info">
<h2>{{ song.name }}</h2>
<p>{{ song.artist }}</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
songs: []
};
},
methods: {
fetchRecommendations() {
// 向网易云音乐 API 发送请求以获取推荐歌曲
// 并将结果保存到 this.songs 中
}
},
mounted() {
this.fetchRecommendations();
}
}
</script>
<style>
.song {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.song img {
width: 100px;
height: 100px;
margin-right: 20px;
}
.song h2 {
font-size: 18px;
margin-bottom: 5px;
}
.song p {
font-size: 14px;
color: #666;
}
</style>
```
这个组件会渲染一个简单的网易云音乐推荐页面,包括一个标题和一个歌曲列表。在 `data` 中定义了一个 `songs` 数组用于存储推荐歌曲的信息。在 `mounted` 钩子中调用 `fetchRecommendations` 方法,该方法会向网易云音乐 API 发送请求以获取推荐歌曲,并将结果保存到 `songs` 中。在模板中使用 `v-for` 指令遍历 `songs` 数组,渲染每个歌曲的封面图片和基本信息。