分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

$.ajax()与vue结合获取数据并渲染

发布时间:2023-09-06 01:52责任编辑:白小东关键词:暂无标签

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"} ???] ?}]

  https://www.cnblogs.com/yg_zhang/p/6158612.html

https://blog.csdn.net/qq_39740187/article/details/77369749

$.ajax()与vue结合获取数据并渲染

原文地址:https://www.cnblogs.com/agansj/p/8983021.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved