vue在使用ajax获取数据时,两种方法(jquery和vue_resource)

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    @*支持ajax版本1.1.0以下的版本*@
    <script src="http://cdn.bootcss.com/vue-resource/1.1.0/vue-resource.min.js"></script>
</head>
<body>
    <div id="app">
        <table>
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>班级</td>
            </tr>
            <tr v-for="item in Students">
                <td>{{item.ID}}</td>
                <td>{{item.Name}}</td>
                <td>{{item.Cls}}</td>
            </tr>
        </table>
    </div>
</body>
</html>

<script> 
    var app = new Vue({
        el: "#app",
        data: {        
            Students:""
        },

   //第一种:jquery ajax
        //beforeCreate: function () {
        //    var url = "/Home/Vue_Data";
        //    var _self = this;
        //    $.get(url, function (data) {
        //        _self.Students = JSON.parse(data);
        //    })
        //}

  //第二种:vue_resource
        created:function(){
            var _self = this;

    var url="/Home/Vue_Data";           
            _self.$http.get(url).then(function (data) {
                var json = data.body;              
                _self.Students = JSON.parse(json);
            });           
        }
    });
</script>

转载于:https://www.cnblogs.com/ZHANGKAIXUAN/p/6790185.html

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页