初学Vue(天气查询)
程序员文章站
2024-02-11 09:22:28
...
v-on
axios
v-model
v-for
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<style>
.clearfix::after{
content: '';
clear: both;
display: block;
}
#app{
width: 800px;
margin: 0 auto;
}
h1,h2{
text-align: center;
}
.zh{
text-align: center;
line-height: 30px;
font-size: 15px;
}
input{
width: 200px;
height: 25px;
margin-left: 300px;
}
.cities{
text-align: center;
}
.cities span{
display: inline-block;
padding-left: 5px;
text-align: center;
cursor: pointer;
}
ul{
padding: 0;
margin: 0;
}
li{
list-style: none;
float: left;
width: 200px;
padding-left: 5px;
width: 150px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<h1>天气查询</h1>
<input type="text"v-model ="city" @keyup.enter="search" value="请输入" οnfοcus="if(this.value=='请输入') {this.value=''}" οnblur="if(this.value=='') this.value='请输入' ">
<div class="cities">
<span v-for="(item,index) in cityList" @click ="add(index)">{{item}}</span>
</div>
<ul class="weatherList clearfix" >
<li v-for="item in messages">
<h2 class=" type">{{item.type}}</h2>
<div class="zh low">{{item.low}}~{{item.high}}</div>
<div class="zh date">{{item.date}}</div>
</li>
</ul>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./lesson1.js"></script>
</body>
</html>
var app = new Vue({
el:"#app",
data:{
city:'',
messages:[],
cityList:['北京','威海','淄博','济南']
},
methods:{
search:function(){
var self =this; //this指向改变
axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" +this.city).then(function(response){
self.messages = response.data.data.forecast;
},function(err){})
},
add:function(index){
this.city =this.cityList[index];
this.search();
}
},
})