04-Json/Ajax/Vue的知识

作者：System 时间：2024年08月17日分类：所有,ajax 字数：1324

在这个问题中，你想要了解如何使用JSON、AJAX和Vue.js来构建一个前端应用。这里有一个简单的例子，展示了如何使用Vue.js来处理从一个API获取的JSON数据。




<!DOCTYPE html>
<html>
<head>
    <title>Vue AJAX JSON Example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h2>Vue AJAX JSON Example</h2>
        <ul>
            <li v-for="user in users">{{ user.name }}</li>
        </ul>
    </div>
 
    <script>
        new Vue({
            el: '#app',
            data: {
                users: []
            },
            created() {
                this.fetchData();
            },
            methods: {
                fetchData() {
                    let vm = this;
                    let xhr = new XMLHttpRequest();
                    xhr.open('GET', 'https://jsonplaceholder.typicode.com/users');
                    xhr.onload = function() {
                        if (this.status == 200) {
                            vm.users = JSON.parse(this.responseText);
                        }
                    };
                    xhr.send();
                }
            }
        });
    </script>
</body>
</html>

这段代码使用Vue.js创建了一个简单的应用，在created钩子中，它通过AJAX请求获取了一个用户的JSON数据，并将其解析后赋值给了users数组。然后，在模板中，它使用v-for指令来循环显示每个用户的名字。这是一个非常基础的例子，展示了如何将这些技术结合在一起使用。

04-Json/Ajax/Vue的知识

评论已关闭

推荐阅读