zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    jQuery CVE-2019-11358原型污染漏洞分析和修复建议
    IIS中配置访问HTTPS
    如何把网址配置为http和https可以同时访问
    C#获取一周的工作日显示(星期几)
    Oracle查询数据库中所有表的记录数
    发布WebApi项目时,提示未包含binyourDocumentationFile.xml文档文件
    IntelliJ Idea 配置Tomcat提示Port is not specified
    C# 属性(Property)和字段(Field)的区别
    IDEA 出现错误:找不到或无法加载主类
    C# Enum 类型遍历
  • 原文地址:https://www.cnblogs.com/ZHANGKAIXUAN/p/6790185.html
Copyright © 2011-2022 走看看