.netMVC Vue axios 获取数据

网页

<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);
        }