提供一种Vue绑定Axios获取的响应的一种方式

最新推荐文章于 2022-12-13 14:38:38 发布

奶奶滴,为什么不学java

最新推荐文章于 2022-12-13 14:38:38 发布

阅读量254

点赞数

分类专栏：前端学习文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_48456383/article/details/125344300

版权

前端学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

想法很简单，简单应用vue获取后端数据。

实例化Vue对象并在method里面加上动态更新的函数add，实例化Axios对象并调用get方法，在get方法里面调用add以实现对vue data的更新

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>

<body>
<!--<div id="myDiv"><h2>内容</h2></div>-->
<button type="button" onclick="loadXMLDoc()">改变</button>

<ul id="app" >
    <li v-for="student in students" :key="student.username">
        {{ student.username }}
    </li>
</ul>
</body>
<script>


    var vm=new Vue({
        el: '#app',
        data:{
            students:[]

        },
        methods: {
            adddata: function (Data) {
                this.students=Data
            }
        }
    })

    function  loadXMLDoc(){

        const instance = axios.create({
            url: '/admin/index',
            method: 'get', // 默认值
            baseURL: 'http://localhost:8080/admin/login',

        });
        axios.get('/admin/index')
            .then(function (response) {
                vm.adddata(response.data);
            });



    }
</script>

</html>

奶奶滴,为什么不学java

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
提供一种Vue绑定Axios获取的响应的一种方式

想法很简单，简单应用vue获取后端数据。实例化Vue对象并在method里面加上动态更新的函数add，实例化Axios对象并调用get方法，在get方法里面调用add以实现对vue data的更新实例
复制链接

扫一扫