.netMVC Vue axios 获取数据

最新推荐文章于 2023-03-19 14:03:08 发布

weixin_33874713

最新推荐文章于 2023-03-19 14:03:08 发布

阅读量679

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/lunawzh/p/7494330.html

本文介绍了一个使用Vue.js结合Axios实现数据获取并显示的例子。通过一个简单的按钮点击事件触发Axios请求，从服务器获取JSON数据，并利用Vue的数据绑定特性在前端页面上展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网页

<link href="~/Content/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/Content/js/jquery-1.8.2.min.js"></script>
<script src="~/Content/js/bootstrap.min.js"></script>
<script src="~/Scripts/vue.min.js"> </script>
<script src="~/Scripts/axios.min.js"></script>
<style>
    .red {
        color: red;
    }

    .blue {
        background: blue;
    }
</style>

<div id="app">
    <button v-on:click="get">提交</button>
    <ul>
        <li v-for="item in list">
         {{item.name}}
        </li>
    </ul>

    {{list.length}}
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            list:[],
        },
        methods: {
            get: function () {
                var me = this;
                axios.post("/home/get", {}).then(function (res) {
                    me.list = res.data;
                })
            }
        }
    })
</script>

控制器

        public ActionResult get()
        {
            var list = new Users[]{
               new Users() { name = "张三", age = 12 },
                 new Users(){ name = "李四", age = 12 },
                new Users() { name = "王五", age = 12 }
            };
            return Json(list, JsonRequestBehavior.AllowGet);
        }