页面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. 832B Petya and Exam

    题意:给你两个串,第一个串里面的字母都是good 字母, 第二个串是模式串,里面除了字母还有?和*(只有一个) ?可以替换所有good字母, *可以替换所有坏字母和空格(可以是多个坏字母!!!这点卡了 ...

  2. MySQL报错解决方案:2013-Lost connection to MySQL server

    今天上课的时候,在搭建完MySQL测试环境中出现的问题,整理如下: 问题描述:搭建完MySQL,用远程连接工具(Navicat)连接时报错: 2013-Lost connection to MySQL ...

  3. python正则下载图片

    import urllib.request import re # 打开图片路径 def open_url(url): #设置请求路径 req = urllib.request.Request(url ...

  4. ueditor取消文本编辑器的自动拉伸高度、宽度。

    1.首先引入富文本编辑器 <script type="text/javascript" src="<%=basePath%>js/ueditor/ued ...

  5. SpringBoot2.0+ DataSourceInitializer不生效的问题

    1.在url后声明时区 2.更换mysql6.0+的驱动 3.配置属性initialization-mode 为 always 我就是这样解决问题的,如果没解决的话,请在留言处指出错误.谢谢

  6. MySQL log_slave_updates 参数【转】

    说明:最近部署了mysql的集群环境,详细如下M01和M02为主主复制,M01和R01为主从复制:在测试的过程中发现了以下问题: 1.M01和M02的主主复制是没有问题的(从M01写入数据能同步到M0 ...

  7. ESXI常用命令

    1.简介 VMware vSphere ESXi6.0常用命令使用,对于一些个人认为比较常用的命令进行总结,如果读者需要了解更多请访问VMware官网下载文档,链接如下:https://www.vmw ...

  8. ajax返回的欧洲字符(例如:法文)乱码

    ajax返回值的乱码现象产生的相关代码如下: Java代码: JsonObject jsonObject = new JsonObject(); jsonObject.addProperty(&quo ...

  9. Django 笔记(三)模版路径 ~ 静态引用

    1.模版路径: 在 settings,py 里的 TEMPLATES = [] 内添加一句代码拼接路径 'DIRS': [os.path.join(BASE_DIR, 'templates')] 有两 ...

  10. 04 if条件判断 流程控制

    条件判断 if 语法一: if 条件: # 条件成立时执行的子代码块 代码1 代码2 代码3 示例: sex='female' age=18 is_beautiful=True if sex == ' ...