打开天气 Api（显示天气图标）

Question

你好社区又回来了。我正在玩 openweather API，我正在构建一个简单的天气应用程序。我有一个问题，我无法显示每个城市的天气状况图标。

我将每个图标 ID 推送到 newArray 中，我试图使用 url 显示它，但没有成功 http://openweathermap.org/img/w/10d.png

有什么建议吗？提前致谢

var app = new Vue({
 el: "#app",
 data: {

  test: [],
  image: [],
  newArray:[],
  message: "",
  url: "",
  
 },
 created: function () {
  this.getData();
  this.cities();
 
  },
        methods: {
  getData: function () {
   var fetchConfig =
    fetch("https://api.myjson.com/bins/i8run", {
     method: "GET",
     headers: new Headers({})
    }).then(function (response) {
     if (response.ok) {
      return response.json();
     }
    }).then(function (json) {
     console.log("My json", json)

     app.test = json.list;
     console.log(app.test);
          app.pushAnArr();
   

    })
    .catch(function (error) {
     console.log(error);
    })
  },
   
  cities: function () {
   var fetchConfig =
    fetch("https://pixabay.com/api/?key=10772849-8270b213e517e422b036ea0fd&q=city", {
     method: "GET",
     headers: new Headers({})
    }).then(function (response) {
     if (response.ok) {
      return response.json();
     }
    }).then(function (json) {
     console.log("My json", json)

     app.image = json.hits;
     console.log(app.image);
    

    })
    .catch(function (error) {
     console.log(error);
    })
  },
   
  pushAnArr: function(){
  for(var i=0; i<app.test.length; i++){
   
   app.newArray.push(app.test[i].weather[0].icon);
   
   
  }
      console.log(app.newArray); 

  
  }
   
   
 }
})

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="app">
   <div v-for="item in newArray" :key="item.id" class="thecard">
                      {{item}}
       <img src="http://openweathermap.org/img/w/item.png" >
        </div>
                
 </div>

  


  
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="main.js"></script>
</body>
</html>

Answer 1

您不能在属性中使用卷曲 {{item}}。

使用：

<img v-bind:src="'http://openweathermap.org/img/w/' + item + '.png' "  />

var app = new Vue({
 el: "#app",
 data: {

  test: [],
  image: [],
  newArray:[],
  message: "",
  url: "",
  
 },
 created: function () {
  this.getData();
  this.cities();
 
  },
        methods: {
  getData: function () {
   var fetchConfig =
    fetch("https://api.myjson.com/bins/i8run", {
     method: "GET",
     headers: new Headers({})
    }).then(function (response) {
     if (response.ok) {
      return response.json();
     }
    }).then(function (json) {
     console.log("My json", json)

     app.test = json.list;
     console.log(app.test);
          app.pushAnArr();
   

    })
    .catch(function (error) {
     console.log(error);
    })
  },
   
  cities: function () {
   var fetchConfig =
    fetch("https://pixabay.com/api/?key=10772849-8270b213e517e422b036ea0fd&q=city", {
     method: "GET",
     headers: new Headers({})
    }).then(function (response) {
     if (response.ok) {
      return response.json();
     }
    }).then(function (json) {
     console.log("My json", json)

     app.image = json.hits;
     console.log(app.image);
    

    })
    .catch(function (error) {
     console.log(error);
    })
  },
   
  pushAnArr: function(){
  for(var i=0; i<app.test.length; i++){
   
   app.newArray.push(app.test[i].weather[0].icon);
   
   
  }
      console.log(app.newArray); 

  
  }
   
   
 }
})

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="app">
   <div v-for="item in newArray" :key="item.id" class="thecard">
                      {{item}}
       <img v-bind:src="'http://openweathermap.org/img/w/' + item + '.png' "  />
        </div>
                
 </div>

  


  
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="main.js"></script>
</body>
</html>

打开天气 Api（显示天气图标）

Open Weather Api (Show weather icon)

html

javascript

api

weather

vue.js