页面dom结构如下

<ul class="user" id="app">
<li><span>姓名: </span> <i id="name">{{msg.name}}</i></li>
<li><span>年龄: </span><i id="old">{{msg.old}}</i></li>
     <li><span>地址: </span><i id="address">{{msg.address}}</i></li>
<li><span>id: </span><i id="user_id">{{msg.user_id}}</i></li>
<li class="del" style="width: 300px;height: 100px;background: yellowgreen;cursor: pointer;">删除</li>
<br /><br />
</ul>

  

js

                var app = new Vue({
el:'#app',
data:{
msg:{
name:'zhangsan',
old:'18',
address:'shanghai',
user_id:'101010',
}
},
                   //可以将渲染数据的操作放在
                  //beforeCreate 、created 、beforeMounted 、 mounted 里面
                  
beforeCreate:function(){
var _this = this;
$.ajax({
type:"get",
url:"http://127.0.1:8888",
async:true,
success:function(data){
_this.msg.name = data[0]['name'];
_this.msg.old = data[0]['age'];
_this.msg.address = data[0]['address'];
_this.msg.user_id = data[0]['id'];
},
error:function(data){ },
}); },
methods:{ },
});

  

Vue2 异步获取的数据(通过ajax)获取的数据 渲染到dom上的更多相关文章

  1. 如何用 ajax 连接mysql数据库,并且获取从中返回的数据。ajax获取从mysql返回的数据。responseXML分别输出不同数据的方法。

    开讲前,先说下网上,大部分的关于这方面的博文或者其他什么的,就我自己的感觉,第一说得不详细,第二语言不能很好的被初学者了解. 我这篇博文的标题之所以用了三句,是为了方便其他人好查找: 这里介绍的方法有 ...

  2. asp.net 线程批量导入数据,ajax获取执行状态

    最近做了一个批量导入功能,长时间运行,没个反馈状态,很容易让人看了心急,产生各种臆想!为了解决心里障碍,写了这么个功能. 通过线程执行导入,并把正在执行的状态存入session,既共享执行状态,通过a ...

  3. jq 获取table元素,ajax 静态填加数据

    知识点: 1.jq如何操作table->操作html内的元素 2. this 怎么使用 问题: 1.点击 修改 后,自动刷新了.判断取值,提示错误.正确出不来 2.ajax传值操作如何保密 ht ...

  4. vue自定义公共组件components||在vue中,解决修改后的数据不能渲染到dom上的bug

    //主页面框架用来嵌入:Main.vue <el-col :span="24" > * { margin: 0; padding: 0; } html { width: ...

  5. 通过Jquery中Ajax获取json文件数据

    1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...

  6. JS-利用ajax获取json数据,并传入页面生成动态tab

    封装好的:ajax.js function ajax(url, fnSucc,fnFaild){ //1[创建] if(window.XMLHttpRequest){ var oAjax = new ...

  7. ajax获取json数据为undefined--原因解析

    解决办法:var dataObj=eval("("+data+")");//转换为json对象 问题: 1. 碰到一个问题ajax成功获取json数据后,取值显 ...

  8. 关于数据未渲染完,要获取document高度问题——ajax全局事件

    昨天在做开发时,遇到这样一个问题,当页面刚加载的时候,就要获取document的高度,可是此时页面上所有的ajax请求的数据都还没有渲染到页面上,所以导致得到的document的高度仅仅是页面结构的高 ...

  9. jQuery中使用Ajax获取JSON格式数据示例代码

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSONM文件中包含了关于“名称”和“值”的信息.有时候我们需要读取JSON格式的数据文件,在jQuery中 ...

随机推荐

  1. Microsoft SQL - 数据库管理系统

    数据库管理系统(Server Management Studio) SQL Server Management Studio是一个数据库管理系统软件,数据库可以看成是一个个存储数据的文件,而Manag ...

  2. Bagging, Boosting, Bootstrap

    Bagging 和 Boosting 都属于机器学习中的元算法(meta-algorithms).所谓元算法,简单来讲,就是将几个较弱的机器学习算法综合起来,构成一个更强的机器学习模型.这种「三个臭皮 ...

  3. 【SVN】关于钩子的一些使用

    前一段时间,李总让我研究一下SVN钩子的使用,以前没接触过这方面东西,在这里记录一下. 何为钩子? 所谓SVN钩子就是一些与版本库事件发生时触发的程序,例如新修订版本的创建,或者是未版本化属性的修改. ...

  4. Linker Scripts3--SECTIONS Command

    1.前言 SECTIONS命令告诉链接器如何映射输入段到输出段以及在内存中如何放置输出段,SECTIONS命令的格式如下: SECTIONS { sections-command sections-c ...

  5. 无法修改linux/ubuntu密码(Authentication token manipulation error )问题解决过程【转】

    转自:https://blog.csdn.net/caizi001/article/details/38659189 Vmware虚拟机里的ubunut系统长期不用,密码忘记了,无奈只能通过slax ...

  6. Yarn vs npm: 你需要知道的一切

    Yarn 是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具.就像我们可以从官方文档了解那样,它的目的是解决这些团队使用 npm ...

  7. 利用C#进行AUTOCAD的二次开发

    众所周知,对AutoCAD进行二次开发用到的主要工具有:ObjectArx,VBA,VLisp.但它们的优缺点是显而易见的:ObjectArx功能强大,编程效率高,但它的缺点是编程者必须掌握VC++, ...

  8. python二叉树练习

    #coding=utf8 node_list=[5,3,6,2,4,None,8,1,None,None,None,7,9] class Node: def __init__(self,item): ...

  9. MYSQL在centos上主从配置

    主从配置理论传送门:http://blog.csdn.net/hguisu/article/details/7325124 具体配置方案: 一:MYSQL主从配置   1.1 部署环境 主(maste ...

  10. Minidump文件分析

    原文地址:blog.csdn.net/pkrobbie/article/details/6636310 简介 在过去几年里,崩溃转储(crash dump)成为了调试工作的一个重要部分.如果软件在客户 ...