在vue中使用和风天气api

第一步 去和风天气网站上设置样式和城市创建标准版天气插件

第二步 在vue中使用

<template>
  <div class="info_weather">
    <div id="he-plugin-standard"></div> // 和风天气
  </div>
</template>
  mounted() {
    
    
    this.weathers();
  },
  methods:{
    
    
	   // 获取天气
    weathers() {
    
    
      // 到和风天气官网设计和下载 https://widget.qweather.com/
      window.WIDGET = {
    
    
        CONFIG: {
    
    
          layout: "1",
          width: "320",
          height: "210",
          background: "1",
          dataColor: "FFFFFF",
          borderRadius: "5",
          key: "9f5cb7d9725e483f95457d258eaba2cb",
        },
      };
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src =
        "https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0";
      document.getElementsByTagName("head")[0].appendChild(script);
    },
}