master

分支 (1)

管理

管理

master

VueLearn
/
vue+axios练习.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue+axios</title>
</head>

<body>
    <div id="app">
        <button @click="getJoke">获取笑话</button>
        <p v-for="item in joke">{{item}}</p>
    </div>
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                joke: []
            },
            methods: {
                getJoke: function () {
                    // 解决作用this域的问题
                    var that = this;
                    axios.get("http://hn216.api.yesapi.cn//?s=App.Common_Joke.RandOne&app_key=55167A5D035A144F159E1AB60CD873C6&num=5")
                        .then(
                            function (res) {
                                that.joke = res.data.data.joke[0];
                            }
                        )
                }
            }
        })
    </script>
</body>

</html>