一、代码:
<!DOCTYPE html>
<html>
<head>
<title>天气查询案例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<div id="app" class="d-flex flex-column">
<div class="d-flex justify-content-center">
<h3 class="d-inline">天气查询</h3>
</div>
<div class="d-flex justify-content-center mt-4">
<input type="text" class="form-control col-5" placeholder="输入城市名称然后回车..." v-model="city" @keyup.enter="search">
<button class="btn btn-primary mb-4 col-1" @click="search"> 搜索</button>
<br>
</div>
<!-- 选择城市 -->
<div class="d-flex justify-content-center">
<button class="btn btn-primary btn-sm " @click="changeCity('北京')">北京</button>
<button class="btn btn-primary btn-sm mx-5" @click="changeCity('上海')">上海</button>
<button class="btn btn-primary btn-sm " @click="changeCity('天津')">天津</button>
<button class="btn btn-primary btn-sm mx-5" @click="changeCity('重庆')">重庆</button>
</div>
<div >
<span v-show="isActive">地点:{{fl}}</span>
<div class="card card-body " v-for="weather in list">
<span>日期:{{weather.day}}</span>
<span>天气:{{weather.wea}}</span>
</div>
</div>
</div>
</div>
</body>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
// 我自己的script
var app = new Vue({
el:'#app',
data:{
isActive:false,
city:"",
fl:'',
list:[]
},
methods:{
search(){
var that = this;
// alert(that.weatherList)
axios.get("http://ajax-api.itheima.net/api/weather?city=" + that.city).then
(function(response){
that.isActive = true;
that.list = response.data.data.data;
that.fl= response.data.data.city
console.log(that.fl);
console.log(that.list);
},function (err){})
},
changeCity(c1){
this.city = c1;
this.search();
}
}
})
</script>
</html>
二、效果展示
①点击按钮直接查询到天气。
②输入完毕后摁下”enter“,或点击搜索查询天气
三、心得
1.城市的选择。所有的备选城市后面的点击事件都传入一个参数,到时候直接使用这个参数就可以。
<div class="d-flex justify-content-center">
<button class="btn btn-primary btn-sm " @click="changeCity('北京')">北京</button>
<button class="btn btn-primary btn-sm mx-5" @click="changeCity('上海')">上海</button>
<button class="btn btn-primary btn-sm " @click="changeCity('天津')">天津</button>
<button class="btn btn-primary btn-sm mx-5" @click="changeCity('重庆')">重庆</button>
</div>
- 点击城市后直接出现天气详情。在方法里可以直接调用其他函数。