找回密码
 立即注册
基于vue.js和axios.js制作的天气查询,是个学习vue.js非常时候拿来练手的小项目
这是html的代码







  •     天气查询



  •    
  •         
  •             天气查询
  •             


  •                     搜索

  •             
  •             
  •                 北京
  •                 上海
  •                 广州
  •                 深圳
  •             
  •         


    • <li v-for=&quot;item in weatherList&quot;>
    •                 {{ item.type }}
    •                
    •                     {{ item.low }}
    •                     ~
    •                     {{ item.high }}
    •                
    •                 {{ item.date }}



  •    







注意:这里的vue和axios的引用是没有先后关系的
这里是css的代码

  • /*style.css*/
  • *{
  •     padding: 0px;
  •     margin: 0px;
  • }
  • #app {
  •     text-align: center;
  •     margin: 100px 0px;
  • }
  • .logo {
  •     font-size: 20px;
  •     font-family: &quot;宋体&quot;;
  • }
  • .form_group {
  •     margin-top: 10px;
  • }
  • .input_text {
  •     height: 30px;
  •     width: 500px;
  • }
  • .input_sub {
  •     height: 34px;
  •     border: none;
  •     width: 50px;
  •     margin-left: -5px;
  •     vertical-align: middle;
  •     background-color: skyblue;
  • }
  • .hotkey>a {
  •     color: black;
  •     text-decoration: none;
  • }
  • .hotkey {
  •     margin-top: 10px;
  •     margin-left: -400px;
  • }
  • .weather_list>li {
  •     height: 100px;
  •     display: inline-block;
  •     list-style: none;
  •     border-right: 3px salmon solid;
  •     margin-right: 30px;
  •     padding-right: 30px;
  •     margin-top: 10px;
  •     line-height: 35px;}

这里是js的代码了

  • //main.js
  • var app = new Vue({
  •     el:&quot;#app&quot;,
  •     data:{
  •         city:&quot;&quot;,
  •         weatherList:[],
  •     },
  •     methods: {
  •         searchweather:function(){
  •             // console.log(&quot;查询天气&quot;);
  •             // console.log(this.city);
  •             var that = this;
  •             axios.get(&quot;http://wthrcdn.etouch.cn/weather_mini?city=&quot;+this.city).then(function(response){
  •                 console.log(response.data.data.forecast);
  •                 that.weatherList = response.data.data.forecast;
  •             })
  •         }
  •     },})

主要就是使用axios和vue的相互结合啦

登录/注册后可看大图
免责声明:本文内容部分来源于网络,出于网络分享目的,如对您的权益版权有异议我们将予以删除,谢谢合作!
分享至 : QQ空间
收藏

1 个回复

正序浏览
666666
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册