看一个例子：
代码语言：javascript复制<html>
<head>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="city" @keyup.enter="getWeathers">
<button @click="getWeathers">查询</button>
<br>
<br>
<a href="#" @click="changeCity('北京')">北京</a>
<a href="#" @click="changeCity('武汉')">武汉</a>
<a href="#" @click="changeCity('上海')">上海</a>
<a href="#" @click="changeCity('深圳')">深圳</a>
<ul>
<li v-for="(item, index) in weathers">
{{item.type}} {{item.low}} {{item.high}} {{item.date}}
</li>
</ul>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
city: '',
weathers: [],
},
methods: {
getWeathers: function () {
var that = this
axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' this.city)
.then(function (response) {
that.weathers = response.data.data.forecast;
}, function (err) {
})
},
changeCity: function (city) {
this.city = city;
this.getWeathers();
},
},
})
</script>
</body>
</html>效果：
在输入框中输入城市，例如武汉，回车或者点击按钮查询：
会显示相关信息。
点击下面的四个城市：
也会显示相关信息。
说明：使用v-model，v-on点击事件，v-on回车事件，v-for遍历数据，axios发送请求。
