• 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>

  • 相关阅读:
    Spring 定时任务
    JSOUP 爬虫
    Google 翻译(中英,英中)
    linux mysql 卸载与安装及配置命令
    2.logback+slf4j+janino 配置项目的日志输出
    DW3 消息推送
    JQuery 常用知识
    intellij idea 2016.3.5 控制台取消行数限制
    1.搭建Maven 多模块应用 --Intellij IDEA 2016.3.5
    JSON 解析工具的封装(Java)
  • 原文地址:https://www.cnblogs.com/ZHANGKAIXUAN/p/6790185.html
Copyright © 2020-2023  润新知