Vue实现天气预报功能

本文为大家分享了Vue实现天气预报功能的具体代码,供大家参考,具体内容如下

1、功能描述

在搜索框中输入城市,下方出现今天及未来四天的天气情况。搜索框下面固定了几个城市,点击可以快速查询。

2、html代码

 <div id="app">
        <div id="srchbar">
            <input type="text" v-model="city" @keyup.enter="srch(city)" id="ipt">
            <a @click=srch(city) id="btn">search</a>
        </div>
        <nav>
            <a href="#" @click="srch('北京')">北京</a>
            <a href="#" @click="srch('上海')">上海</a>
            <a href="#" @click="srch('广州')">广州</a>
            <a href="#" @click="srch('深圳')">深圳</a>
        </nav>
        <div id="res">
            <table>
                <tr>
                    <th v-for="item in forecasts">{{item.type}}</th>
                </tr>
                <tr>
                    <td v-for="item in forecasts">{{item.low}}~{{item.high}}</td>
                </tr>
                <tr>
                    <td v-for="item in forecasts">{{item.date}}</td>
                </tr>
            </table>
        </div>
</div>

3、js代码

var app = new Vue({
        el: "#app",
        data: {
            city: "",
            forecasts: []
        },
        methods: {
            srch: function (c) {
                var that = this;
                axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + c).then(function (message) {
                    that.city = c;
                    that.forecasts = message.data.data.forecast;
                })
            }

        }
})

结果示意

总结

主要练习了v-for, v-model, v-on表达式,以及使用axios通过接口请求数据。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue使用webSocket更新实时天气的方法

    目录 前言 关于 webSocket 的操作及示例: webSocket 1.关于 webSocket 2.与 AJAX 轮的区别 3.webSocket 事件 4. 一个简单的示例 天气更新 图片素材 重连机制 前言 在 vue 中使用 webSocket 做一个简单的天气实时更新模块. 关于 webSocket 的操作及示例: 1.webSocket 连接 2.接收数据 3.重连机制 webSocket 1.关于 webSocket webSocket 是 HTML5 开始提供的一种在单个

  • Vue实现天气预报功能

    本文为大家分享了Vue实现天气预报功能的具体代码,供大家参考,具体内容如下 1.功能描述 在搜索框中输入城市,下方出现今天及未来四天的天气情况.搜索框下面固定了几个城市,点击可以快速查询. 2.html代码 <div id="app"> <div id="srchbar"> <input type="text" v-model="city" @keyup.enter="srch(city

  • vue使用高德地图实现实时定位天气预报功能

    目录 JSAPI 的加载 使用 JSAPI Loader (推荐) JSAPI key和安全密钥的使用 项目代码步骤: 1.在index.html页面body中添加密钥 2.安装@amap/amap-jsapi-loader 使用 3.实现代码: 实现效果: 需求:根据定位功能,使用高德地图实现定位当前城市的天气预报功能. JSAPI 的加载 JS API 2.0 版本提供了两种方案引入地图 JSAPI: 1. 使用官网提供的 JSAPI Loader 进行加载: 2. 以常规 JavaScri

  • 微信公众平台开发之天气预报功能

    最近有项目需求给微信公众号上增加了天气预报功能,使用百度提供的车联网API V3.0中的天气查询功能实现.先上一张最终效果图: 项目需求:有连接好的微信平台,有百度注册帐号,需要在百度LBS开放云平台,添加应用,获取AK代码,PHP代码编辑器,如EditPlus等 下面详细介绍下开发步骤: 第一步:准备工作 登录微信公众平台,检查服务器配置是否已启用,URL(服务器地址) 是否已配置Token(令牌),与自己写的微信入口文件中的Token(令牌一致),如下图:然后点击提交,只至网页上提示绿色背景

  • Angular实现的简单查询天气预报功能示例

    本文实例讲述了Angular实现的简单查询天气预报功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="angular.min.js"></script> </head> <body ng-app="myApp&qu

  • 使用vue实现grid-layout功能实例代码

    1.先clone项目到本地. 2.git reset --hard commit 命令可以使当前head指向某个commit. 完成html的基本布局 点击复制按钮来复制整个commit id.然后在项目根路径下运行 git reset .用浏览器打开index.html来预览效果,该插件的html主要结果如下: <!-- 节点容器 --> <div class="dragrid"> <!-- 可拖拽的节点,使用translate控制位移 --> &

  • vue实现打印功能的两种方法

    第一种方法:通过npm 安装插件 1,安装  npm install vue-print-nb --save 2,引入  安装好以后在main.js文件中引入 import Print from 'vue-print-nb' Vue.use(Print); //注册 3,现在就可以使用了 <div id="printTest" > <p>锄禾日当午</p> <p>汗滴禾下土 </p> <p>谁知盘中餐</p&

  • 100行代码实现一个vue分页组功能

    今天用vue来实现一个分页组件,总体来说,vue实现比较简单,样式部分模仿了elementUI.所有代码的源码可以再github上下载的到:下载地址 先来看一下实现效果: 点击查看效果 整体思路 我们先看一下使用到的文件的目录: 我们在 pageComponentsTest.vue 页面引入了 pageComponent.vue 分页组件.整体思路是通过 props 来达到组件的灵活通用的效果,整体语法是使用vue的VM语法. pageComponent.vue实现 首先实现一个分页,需要知道数

  • 一文快速详解前端框架 Vue 最强大的功能

    组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代). 针对不同的使用场景,如何选择行之有效的通信方式?这是我们所要探讨的主题.本文总结了vue组件间通信的几种方式,如props. $emit/ $on.vuex. $parent / $children. $attrs/ $lis

  • vue实现搜索功能

    本文实例为大家分享了vue实现搜索功能的具体代码,供大家参考,具体内容如下 methods (要有一定的触发条件才能执行,如点击事件) <template> <div class="safetyInfo"> <input type="text" name="" id="" placeholder="搜索" v-model="search"/> <

  • Flutter部件内部状态管理小结之实现Vue的v-model功能

    Flutter部件内部状态管理 本文是 Flutter 部件内部状态管理的小结,从部件的基础开始,到部件的状态管理,并且在过程中实现一个类似 Vue 的 v-model 的功能. widget 基础 widget(部件) 如 React 里万物皆组件, Java 里万物皆对象, Flutter 里,能看到的一切都是 widget(部件),如按钮.文本框等等. Flutter 内部已经为我们做了一些基础的 widget ,例如: Text : 这个就是一个文本部件,里面用于放置文本 Row , C

随机推荐