在Vue中调用和风天气api展示天气详情和生活指数

最新推荐文章于 2025-04-21 11:10:54 发布

KiMiWaWonderful

最新推荐文章于 2025-04-21 11:10:54 发布

阅读量2.9k

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/weixin_42112064/article/details/104316025

版权

api的具体使用可以看官网。
我主要使用两个api。
我新建了一个叫Weather.vue的Vue组件。

HTML代码：

我使用Element-UI框架的el-tabs，弄了一个标签页，可以切换查看天气详情和生活指数。

<template>
  <div>

    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="实况天气" name="first">
        <div class="hxp-weather ">
          <div class=" hxp-weather-footer">
            <div class="text-center hxp-weather-footer-left">
              <h2>{
   {
   tmp}}℃</h2>
              <em>{
   {
   cond_txt}}</em>
            </div>
            <div class="hxp-weather-footer-right">
              <ol>
                <li>体感温度：{
   {
   fl}}</li>
                <li>风向：{
   {
   wind_dir}}</li>
                <li>风速：{
   {
   wind_spd}}</li>
                <li>风力：{
   {
   wind_sc}}</li>
                <li>降水量：{
   {