Vue2 异步获取的数据(通过ajax)获取的数据 渲染到dom上
页面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上的更多相关文章
- 如何用 ajax 连接mysql数据库,并且获取从中返回的数据。ajax获取从mysql返回的数据。responseXML分别输出不同数据的方法。
开讲前,先说下网上,大部分的关于这方面的博文或者其他什么的,就我自己的感觉,第一说得不详细,第二语言不能很好的被初学者了解. 我这篇博文的标题之所以用了三句,是为了方便其他人好查找: 这里介绍的方法有 ...
- asp.net 线程批量导入数据,ajax获取执行状态
最近做了一个批量导入功能,长时间运行,没个反馈状态,很容易让人看了心急,产生各种臆想!为了解决心里障碍,写了这么个功能. 通过线程执行导入,并把正在执行的状态存入session,既共享执行状态,通过a ...
- jq 获取table元素,ajax 静态填加数据
知识点: 1.jq如何操作table->操作html内的元素 2. this 怎么使用 问题: 1.点击 修改 后,自动刷新了.判断取值,提示错误.正确出不来 2.ajax传值操作如何保密 ht ...
- vue自定义公共组件components||在vue中,解决修改后的数据不能渲染到dom上的bug
//主页面框架用来嵌入:Main.vue <el-col :span="24" > * { margin: 0; padding: 0; } html { width: ...
- 通过Jquery中Ajax获取json文件数据
1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...
- JS-利用ajax获取json数据,并传入页面生成动态tab
封装好的:ajax.js function ajax(url, fnSucc,fnFaild){ //1[创建] if(window.XMLHttpRequest){ var oAjax = new ...
- ajax获取json数据为undefined--原因解析
解决办法:var dataObj=eval("("+data+")");//转换为json对象 问题: 1. 碰到一个问题ajax成功获取json数据后,取值显 ...
- 关于数据未渲染完,要获取document高度问题——ajax全局事件
昨天在做开发时,遇到这样一个问题,当页面刚加载的时候,就要获取document的高度,可是此时页面上所有的ajax请求的数据都还没有渲染到页面上,所以导致得到的document的高度仅仅是页面结构的高 ...
- jQuery中使用Ajax获取JSON格式数据示例代码
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSONM文件中包含了关于“名称”和“值”的信息.有时候我们需要读取JSON格式的数据文件,在jQuery中 ...
随机推荐
- 832B Petya and Exam
题意:给你两个串,第一个串里面的字母都是good 字母, 第二个串是模式串,里面除了字母还有?和*(只有一个) ?可以替换所有good字母, *可以替换所有坏字母和空格(可以是多个坏字母!!!这点卡了 ...
- MySQL报错解决方案:2013-Lost connection to MySQL server
今天上课的时候,在搭建完MySQL测试环境中出现的问题,整理如下: 问题描述:搭建完MySQL,用远程连接工具(Navicat)连接时报错: 2013-Lost connection to MySQL ...
- python正则下载图片
import urllib.request import re # 打开图片路径 def open_url(url): #设置请求路径 req = urllib.request.Request(url ...
- ueditor取消文本编辑器的自动拉伸高度、宽度。
1.首先引入富文本编辑器 <script type="text/javascript" src="<%=basePath%>js/ueditor/ued ...
- SpringBoot2.0+ DataSourceInitializer不生效的问题
1.在url后声明时区 2.更换mysql6.0+的驱动 3.配置属性initialization-mode 为 always 我就是这样解决问题的,如果没解决的话,请在留言处指出错误.谢谢
- MySQL log_slave_updates 参数【转】
说明:最近部署了mysql的集群环境,详细如下M01和M02为主主复制,M01和R01为主从复制:在测试的过程中发现了以下问题: 1.M01和M02的主主复制是没有问题的(从M01写入数据能同步到M0 ...
- ESXI常用命令
1.简介 VMware vSphere ESXi6.0常用命令使用,对于一些个人认为比较常用的命令进行总结,如果读者需要了解更多请访问VMware官网下载文档,链接如下:https://www.vmw ...
- ajax返回的欧洲字符(例如:法文)乱码
ajax返回值的乱码现象产生的相关代码如下: Java代码: JsonObject jsonObject = new JsonObject(); jsonObject.addProperty(&quo ...
- Django 笔记(三)模版路径 ~ 静态引用
1.模版路径: 在 settings,py 里的 TEMPLATES = [] 内添加一句代码拼接路径 'DIRS': [os.path.join(BASE_DIR, 'templates')] 有两 ...
- 04 if条件判断 流程控制
条件判断 if 语法一: if 条件: # 条件成立时执行的子代码块 代码1 代码2 代码3 示例: sex='female' age=18 is_beautiful=True if sex == ' ...