Vue:网络实例-查天气

2022-6-25

请求地址:http://wthrcdn.etouch.cn/weather_mini

请求方法：get

请求参数：city（城市名）

响应内容：天气信息

代码：

	<body>
		<div id="app">
			<input type="text" v-model="city" @keyup.enter="cw()"/>
			<button @click="cw">查询</button>
			<br>
			最常查询:
			<a href="javascript:;" @click="cy('北京')">北京</a>丨
			<a href="javascript:;" @click="cy('济南')">济南</a>
			<br>
			<ul>
				<li v-for="item in weatherList">
					日期:<a>{{item.date}}</a>丨
					温度:<a>{{item.high}}-{{item.low}}</a>
				</li>
			</ul>
        </div>
		<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>
		    var app = new Vue({
				el:"#app",
				data:{ 
					city:"",
					weatherList:[]
				},
				methods:{
					cw:function(){
						var that = this;
						axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
						.then(function(response){
							//console.log(response);
							that.weatherList=response.data.data.forecast;
						},function(err){ })
					},
					cy:function(c){
						this.city = c;
						this.cw();
					}
				},
			})
		</script>
	</body>

阅读剩余

作者：Tin

链接：http://www.tinstu.com/2145.html

文章版权归作者所有，未经允许请勿转载。

THE END