17.vue+axios搭配使用 

<body>
    <div id="mask">
        <button @click="getJoke">获取笑话</button>
        <p> {{ joke }} </p>
    </div>
    <script src="http://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script>
        var mask = new Vue({
            el: "#mask",
            data: {
                joke: "好笑的笑话"
            },
            methods: {
                getJoke: function() {
                    var that = this; // 因为在then方法函数里面的 this不是指向 vue了  所以给它设个全局变量
                    axios.get("https://autumnfish.cn/api/joke/list?num=1")
                        .then(function(response) {
                            // 把网络请求库里面的笑话渲染到 定义的joke里面 因为是一个数组 所以把它转为字符串
                            var arr = response.data.jokes;
                            console.log(arr.toString());
                            that.joke = arr.toString();

                        }, function(error) {
                            console.log(error);
                        })
                }
            }
        })
    </script>
</body>

 

posted @ 2020-12-28 22:19  闭上耳朵  阅读(90)  评论(0)    收藏  举报