用vue写一个百度热搜
时间: 2023-08-04 17:34:28 浏览: 160
好的,以下是一个简单的实现百度热搜的Vue组件的示例代码:
```
<template>
<div class="hot-search">
<h2>百度热搜</h2>
<ul>
<li v-for="(item, index) in hotSearchList" :key="index">
<span class="index">{{ index + 1 }}</span>
<a :href="item.link" class="title" target="_blank">{{ item.title }}</a>
<span class="hot-degree">{{ item.hotDegree }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
hotSearchList: [], // 存储热搜列表数据
};
},
mounted() {
this.getHotSearchList();
},
methods: {
// 获取热搜列表数据的方法
getHotSearchList() {
// 发送请求获取热搜数据
// 这里使用了axios库进行网络请求
axios.get('/api/hotSearchList').then((res) => {
if (res.data && res.data.length > 0) {
this.hotSearchList = res.data;
}
}).catch((error) => {
console.error(error);
});
},
},
};
</script>
<style scoped>
.hot-search {
width: 500px;
margin: 0 auto;
}
.hot-search h2 {
font-size: 24px;
margin-bottom: 20px;
}
.hot-search ul {
list-style: none;
margin: 0;
padding: 0;
}
.hot-search li {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.hot-search .index {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #f44336;
color: #fff;
font-size: 12px;
text-align: center;
line-height: 20px;
margin-right: 10px;
}
.hot-search .title {
color: #333;
font-size: 14px;
text-decoration: none;
margin-right: 10px;
}
.hot-search .hot-degree {
color: #999;
font-size: 12px;
}
</style>
```
在这个示例代码中,我们通过发送网络请求获取热搜数据,然后将数据渲染到页面上。您需要在后端编写一个API接口来获取热搜数据,并在代码中调用该接口。同时,您需要根据您的实际需求来调整样式和布局。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)