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