vuejs小例子之天气查询
发布时间:2020-12-16 23:03:49 所属栏目:百科 来源:网络整理
导读:看一个例子: html head script src ="https://unpkg.com/axios/dist/axios.min.js" / script ="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" / body div id ="app" input type ="text" v-model ="city" @keyup.enter ="getWeathers" button @click 查询
看一个例子: <html> head> script src="https://unpkg.com/axios/dist/axios.min.js"></script="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </bodydiv id="app"> input type="text" v-model="city" @keyup.enter="getWeathers"button @click>查询buttonbra href="#" @click="changeCity('北京')">北京a="changeCity('武汉')">武汉="changeCity('上海')">上海="changeCity('深圳')">深圳ul> li v-for="(item,index) in weathers"> {{item.type}} {{item.low}} {{item.high}} {{item.date}} lidiv 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(); },}) > 效果: 在输入框中输入城市,例如武汉,回车或者点击按钮查询: 会显示相关信息。 点击下面的四个城市: 也会显示相关信息。 说明:使用v-model,v-on点击事件,v-on回车事件,v-for遍历数据,axios发送请求。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |