axios的一些东西
<template>
<div>
<el-input v-model="scity" placeholder="请输入城市"></el-input>
<el-button type="primary" @click="getWeatherInfo">获取天气</el-button>
<el-card>
{{ city }} {{ wendu }}
{{ ganmao }}
</el-card>
<ul style="list-style: none">
<li v-for="(item, index) in forecast" :key="index">
{{ item.date }}{{ item.high }}{{ item.low }}{{ item.type }}
</li>
</ul>
</div>
</template>
<script>
export default {
name: "SubWeather",
data() {
return { scity: "", city: "", wendu: "", ganmao: "", forecast: [] };
},
props: [],
components: {},
created() {},
mounted() {},
methods: {
getWeatherInfo() {
let _this = this;
this.$axios
.get(`http://wthrcdn.etouch.cn/weather_mini?city=${this.scity}`)
.then(
function (res) {
_this.city = res.data.data.city;
_this.wendu = res.data.data.wendu;
_this.ganmao = res.data.data.ganmao;
_this.forecast = res.data.data.forecast;
},
function (err) {
console.log(err);
}
);
},
},
};
</script>
<style lang="css" scoped>
</style>
<template>
<div>
<el-input v-model="scity" placeholder="请输入城市"></el-input>
<el-button type="primary" @click="getWeatherInfo">获取天气</el-button>
<el-card>
{{ city }} {{ wendu }}
{{ ganmao }}
</el-card>
<ul style="list-style: none">
<li v-for="(item, index) in forecast" :key="index">
{{ item.date }}{{ item.high }}{{ item.low }}{{ item.type }}
</li>
</ul>
</div>
</template>
<script>
export default {
name: "SubWeather",
data() {
return { scity: "", city: "", wendu: "", ganmao: "", forecast: [] };
},
props: [],
components: {},
created() {},
mounted() {},
methods: {
getWeatherInfo() {
let _this = this;
this.$axios
.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.scity)
.then(
function (res) {
_this.city = res.data.data.city;
_this.wendu = res.data.data.wendu;
_this.ganmao = res.data.data.ganmao;
_this.forecast = res.data.data.forecast;
},
function (err) {
console.log(err);
}
);
},
},
};
</script>
<style lang="css" scoped>
</style>
以上两种写法都可以
注意点 :
.then
回调函数里取不到vue的this实例
解决方法:使用前先赋值给其他变量let _this = this;
两种不同的url形式
"http://wthrcdn.etouch.cn/weather_mini?city="+this.scity
`http://wthrcdn.etouch.cn/weather_mini?city=${this.scity}`
post
getInfo() {
let _this = this;
this.$axios
.post("https://autumnfish.cn/api/user/reg", {
username: this.uName,
})
.then(
function (response) {
console.log(response.data);
_this.msg = response.data;
},
function (error) {
console.log(error);
}
);
},
Vue学习笔记 文章被收录于专栏
Vue相关