Vue实现可视化查询天气

vue

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

项目地址：https://gitcode.com/gh_mirrors/vu/vue

免费下载资源

Ken'

881人浏览 · 2022-05-30 17:19:17

Ken' · 2022-05-30 17:19:17 发布

效果图如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气查询</title>
   
    
    <link rel="stylesheet" type="text/css" href="./css/index(天知道).css" />
    <link rel="stylesheet" type="text/css" href="./css/reset.css" />

    <script src="./vue.js"></script>
</head>
<body>
    <div class="wrap" id="app">
        <div class="search_form">
          <div class="logo"><img src="img/logo.png" alt="logo" /></div>
          <div class="form_group">
            <input type="text" v-model="city"  @keyup.enter="searchWeather"   class="input_txt" placeholder="请输入查询的天气"/>
            <button class="input_sub" @click="searchWeather">
              搜 索
            </button>
          </div>
          <div class="hotkey">
            <a href="javascript:;" @click="changeCity('北京')">北京</a>
            <a href="javascript:;" @click="changeCity('上海')">上海</a>
            <a href="javascript:;" @click="changeCity('广州')">广州</a>
            <a href="javascript:;" @click="changeCity('深圳')">深圳</a>
          </div>
        </div>
        <ul class="weather_list">
          <li v-for="item in weatherList">
            <div class="info_type"><span class="iconfont">{{ item.type }}</span></div>
            <div class="info_temp">
              <b>{{ item.low }}</b>
              ~
              <b>{{ item.high }}</b>
            </div>
            <div class="info_date"><span>{{ item.date }}</span></div>
          </li>
        </ul>
      </div>

      <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

      <script>
          var app = new Vue({
              el:"#app",
              data:{
                  city:"",
                  weatherList:""
              },
              methods:{
                searchWeather:function(){
                    var that = this;
                    axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city).then((result) => {
                        that.weatherList = result.data.data.forecast;
                   }).catch((err) => {
                        
                    });
                },
                changeCity:function(city){
                    this.city = city;
                    this.searchWeather();
                }
              }
          })
      </script>
</body>
</html>

GitHub 加速计划 / vu / vue

100

下载

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

最近提交(Master分支：18 天前 )

9e887079 [skip ci] 11 个月前

73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

沁言学术 vs Grammarly：中文学术写作与语料库本地化支持的表现剖析

Grammarly是全球写作工具，语料库以英文为主，支持基本中文检查；沁言学术是本土AI平台，语料库深度本地化，针对中文学术设计。中文学术写作：Grammarly基础语法/拼写（本地化弱），沁言学术AI生成/优化（深度支持）。语料库本地化：Grammarly通用库（英文主导），沁言学术本土库（CNKI等集成）。整体：Grammarly免费版通用，付费版高级；沁言学术免费版入门，AI付费优化。表现亮