axios的一些东西

<template>
    <div>
        <el-input v-model="scity" placeholder="请输入城市"></el-input>
        <el-button type="primary" @click="getWeatherInfo">获取天气</el-button>
        <el-card>
            {{ city }} &nbsp;&nbsp;&nbsp; {{ wendu }} &nbsp;&nbsp;&nbsp;
            {{ 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 }} &nbsp;&nbsp;&nbsp; {{ wendu }} &nbsp;&nbsp;&nbsp;
            {{ 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相关

全部评论

相关推荐

不愿透露姓名的神秘牛友
07-29 12:06
点赞 评论 收藏
分享
07-19 13:28
长沙学院 Java
鸿哥鸿哥:学院(一本),感觉在脱ku子放屁,学院结尾的除了那几家出名的,一律按二本处理
点赞 评论 收藏
分享
Lorn的意义:你这标个前端是想找全栈吗?而且项目确实没什么含金量,技术栈太少了,边沉淀边找吧 现在学院本想就业好一点四年至少得高三模式两年加油吧
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务