zoukankan      html  css  js  c++  java
  • $.ajax()与vue结合获取数据并渲染

    利用json文件模拟ajax获取数据,vue渲染数据:

    Html:
    <div id="app1">
        <ul>
            <li v-for="item in datas">
                <div href="">
                    <div v-text="item.time"></div>
                    <div href="" v-for="item1 in item.list">
                        <div v-text="item1.type"></div>
                        <div v-text="item1.money"></div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    
    Js:
    var vmm=new Vue({
        el: "#app1",
        data: {
            datas: []
    
        },
        mounted:function(){
            this.showData();
            //需要执行的方法可以在mounted中进行触发,其获取的数据可以赋到data中后,可以放在前面进行渲染
        },
        methods:{
            showData:function () {
                jQuery.ajax({
                    type: 'Get',
                    url: "data-data.json",
    			// data:{type:type,ext:ext},
                  datatype:"json",
                  success: function (data) {
                    for(var i=0;i<data.length;i++){
                    vmm.datas.push(data[i]);
                  }
                   console.log(vum.datas);
                   }
               }
    });
    
    data-data.json:
    [
      {
        "time":"2017-10-10",
        "list":[
          {"type":"消费(订单号101010101010)","money":"99.00"},
          {"type":"储值(订单号101010101010)","money":"78.00"},
          {"type":"退款(订单号101010101010)","money":"66.00"}
        ]
      },
      {
        "time":"2017-08-16",
        "list":[
          {"type":"消费(订单号101010101010)","money":"99.00"},
          {"type":"储值(订单号101010101010)","money":"78.00"},
          {"type":"退款(订单号101010101010)","money":"66.00"}
        ]
      },
      {
        "time":"2017-07-16",
        "list":[
          {"type":"消费(订单号101010101010)","money":"99.00"},
          {"type":"储值(订单号101010101010)","money":"78.00"},
          {"type":"退款(订单号101010101010)","money":"66.00"}
        ]
      }
    ]
    
    宝剑锋从磨砺出,梅花香自苦寒来。
  • 相关阅读:
    Spring Cloud Config 配置中心
    Spring Cloud Zuul 路由网关
    Spring Cloud Hystrix 断路器
    Spring Cloud feign 服务消费者
    Spring Cloud Ribbon 负载均衡
    Spring Cloud Eureka 服务注册与发现
    CSS编辑工具
    CSS简史
    CSS简介
    Less的内置函数
  • 原文地址:https://www.cnblogs.com/haimengqingyuan/p/7811276.html
Copyright © 2011-2022 走看看