<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./vue.js"></script>
<script src="./jquery.min.js"></script>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<!-- v-cloak 指令：當vue中的data屬性和computed計算屬性中的數據沒有得到的時候，由於靜態頁面渲染速度快，導致頁面中會出現插值表達式，希望等數據加載完成之后，再展示標簽。 -->
<!-- v-cloak工作原理：當vm實例沒有出現的時候，v-cloak設置容器元素為 display:none；當vm實例創建成功，v-cloak會被移除，那么display:none也就失效了。 -->
<div id="app" v-cloak>
<h1>搜索部分</h1>
<input type="text" v-model="name" />
<button @click="search">查詢</button>
<hr />
<h3>實時天氣</h3>
<div>
<h4>當前城市：{{currentName}}</h4>
<p>溫度：{{currentWeather.daytemp}}℃ ~{{currentWeather.nighttemp}}</p>
<p>
天氣：{{currentWeather.dayweather}} ~{{currentWeather.nightweather}}
</p>
</div>
<hr />
<div v-for="(obj,i) in fetureWeather ">
<p>日期：{{obj.date}}</p>
<p>溫度：{{obj.daytemp}}℃ ~ {{obj.nighttemp}}℃</p>
<p>天氣：{{obj.dayweather}} ~ {{obj.nightweather}}</p>
<br />
</div>
</div>
<script>
$.get(
"https://restapi.amap.com/v3/ip?key=626fea0783b1568c96f7ac31037d26ff",
function (data) {
let cityname = data.city;
console.log(cityname);
$.get(
`https://restapi.amap.com/v3/weather/weatherInfo?key=626fea0783b1568c96f7ac31037d26ff&city=${cityname}&extensions=all`,
function (result) {
let cW = result.forecasts[0].casts[0];
let fW = result.forecasts[0].casts.slice(1);
let vm = new Vue({
el: "#app",
data: {
name: cityname,
currentWeather: cW,
fetureWeather: fW,
currentName: cityname,
},
methods: {
search() {
let self = this;
$.get(
`https://restapi.amap.com/v3/weather/weatherInfo?key=626fea0783b1568c96f7ac31037d26ff&city=${self.name}&extensions=all`,
function (result1) {
let ccW = result1.forecasts[0].casts[0];
let ffW = result1.forecasts[0].casts.slice(1);
self.currentWeather = ccW;
self.fetureWeather = ffW;
self.currentName = self.name;
}
);
},
},
computed: {},
});
}
);
}
);
</script>
</body>
</html>
效果如下：
