Vue 根据接口返回值重新渲染界面

最新推荐文章于 2024-05-27 18:23:33 发布
最新推荐文章于 2024-05-27 18:23:33 发布
阅读量8.7k 收藏 1
点赞数
分类专栏： 前端 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AlbertFly/article/details/82769604
版权
js 同时被 2 个专栏收录
30 篇文章 0 订阅
订阅专栏
前端
5 篇文章 0 订阅
订阅专栏 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<div id="box">
	<input type="button" @click="get()" value="点我异步获取数据(Get)">
	<input type="text" v-model="msg" />
	<p>{{ msg }}</p>
	</div>

<script type = "text/javascript">
window.onload = function(){
var vm = new Vue({
    el:'#box',
    data:{
        msg:'Hello World!',
    },
    methods:{
        get:function(){
            //发送get请求
            this.$http.get('/try/ajax/ajax_info.txt').then(function(res){
                this.msg=res.body ;
				//document.write(res.body);    
            },function(){
                console.log('请求失败处理');
            });
        }
    }
});
}
</script>
</body>
</html>

执行前效果:

点击按钮执行效果

脚本可以在 http://www.runoob.com/try/try.php?filename=vue2-ajax 在线测试

动态刷新的效果 主要来自于

this.msg=res.body ;

 

琅琊山二当家
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue - 详细实现先调用接口，然后再渲染数据，让页面 DOM 元素模板等待接口请求数据完毕后再进行渲染页面（先加载完所有数据再渲染页面）
王佳斌
01-13 1万+
效果图 文章末尾有代码示例及思路。 前言 如果你的数据是本地（data 直接定义），那么并不会发生任何问题，因为它们是同步的。 <template> <ul v-for="(item, index) in getData()" :key="index"> <li>{{ item.name }}</li> </ul> </template> getData() { api data ... } 由于模板（templat
vue 接口数据返回之后再渲染页面_vue首页异步请求后数据不渲染
weixin_39714763的博客
12-22 4029
自己遇到的问题记录一下，做一个企业微信鉴权登录，首页获取用户信息存session方便后续页面调用。在App.vue中写了鉴权，调用接口拿到了返回的用户信息，并且存在了session中。但是在首页home.vue中拿取不到session数据。后来查了半天，请教了几个vue同行知道问题出在了哪里。由于是异步请求，而app和home在请求还未完成时就已经加载完毕了，导致从session中拿取不到数据。知...
VUE组件重新渲染-——通过改变key 使得vue重新渲染页面
最新发布
昭昭
05-27 455
这个组件这么写就没考虑这个动态的事情，但是又只有一个地方用到了 所以在想怎么让他支持根据id变化来动态支持数据刷新，第一时间想到的是改组件写watch 去监听id，但是这样就需要去改组件改接口不能再用hook了，所以我去搜罗了怎么能让组件重新渲染。场景是这样的有一个公共列表组件他是通过hook来实现的接口数据啥的，但是我在某个地方需要用到了某个列表去详情页展示，需要动态变换id来切换数据，但是公共的组件不能实现。如果组件中有未保存的数据、表单输入或者其他临时状态，这些数据会在组件重新创建时丢失。
Vue页面多个axios请求得到数据后在渲染页面
m0_45213287的博客
11-08 5588
问题描述： 当我们访问页面时，axios请求还没获得数据,，就渲染了页面，导致页面为空，这种情况很不稳定，取决于你后端接口速度。 原因： 因为axios请求是异步请求，假如当你的页面在最开始渲染的时候同时发送多个axios请求，如果后端接口返回数据的时间为1秒，那么在axios请求发出后，系统会去执行vue中的其他代码，当等你axios请求接收到数据后再去获取数据，此时已经过去1秒了，你的页面可能已经渲染完了，所以就可能会出现有时候页面有数据，有时候没数据，或者每次切换页面都是上一次访问的数据。 解
vue调取数据接口后渲指定的数据
weixin_47038177的博客
08-20 592
vue调取数据接口后渲指定的数据 当我们拿到后台的数据时，可能想要渲染到页面指定的数据。什么意思呢？举个例子，就是我们拿到后台的数据可能有几十条甚至好几百条，但是我们前端需要展示的只是前十条。那么这个怎么用vue的方式来实现呢？ 首先我想到的是用slice（）方法来进行截取。他是js的一种数组方式，不太清楚的可以自行百度。 那我们先用axios拿到数据。 // An highlighted block this.$axios.get('http://xx/List').then((response) =&g
Vue入门7、axios带参数请求+渲染后端返回接口数据
舌尖上的蛋炒饭的博客
08-18 771
Vue入门7、参数传递+axios带参数请求 参数传递 axios带参数请求
vue 接口数据返回之后再渲染页面_Vue怎么让数据请求成功以后再渲染页面？
热门推荐
weixin_39970064的博客
12-22 1万+
需求如下：进入页面有一个检测按钮，点击即可向后端请求数据。进入页面如果不点击检测则显示如下点击检测 如果返回的是正常的状态则显示如果返回的状态是异常 则显示目前有个BUG 就是点击检测的时候 先从变为 然后马上变为 因为逻辑里面我是用v-if v-else 来判断未知(没有点击的状态)正常，异常(按钮点击过后根据返回的布尔值判断)下面贴一下代码：未知size="mini":type="isPr...
微商城后端接口项目包含API接口说明文档等
06-15
- API接口说明文档是开发者间沟通的桥梁，应详细列出每个接口的URL、请求方法、参数、返回值等，方便前端调用。 - 文档还应包含错误处理和示例代码，帮助开发者理解和使用接口。 通过以上知识点的深入理解和实践...
servlet+vue后端代码
05-04
Vue.js则用于前端界面的动态渲染，提供用户交互体验。 【描述】提到的功能是实现前端的登录功能，这意味着用户可以在浏览器界面上输入用户名和密码，这些信息会被发送到后端。后端的Servlet会接收到这些登录请求，...
前端vue入门及框架搭建
03-12
- **计算属性的getter**：getter方法用于根据依赖数据计算返回值，Vue会自动跟踪这些依赖。 - **计算属性的缓存**：计算属性只有在相关依赖改变时才会重新求值，提高了性能。 总结Day 01的学习，Vue.js的这些基本...
基于vue3.0简单的页面使用
06-12
Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。Vue3.0是其最新的主要版本，带来了许多性能优化和新特性。在这个“基于vue3.0简单的页面使用”主题中，我们将深入探讨如何利用Vue3.0的核心概念和组件来...
VUE常见面试题总结篇
02-16
答案：<keep-alive> 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。 7. 如何获取 dom？ 答案：ref="domName" 用法：this.$refs.domName。 8. 说出几种 vue 当中的指令和它的用法？ 答案...
请求多个接口时，要保证同时拿到数据，渲染到同一个页面上的方法
weixin_42197834的博客
09-20 3469
使用promise修饰，在方法1 和方法2 都请求成功时再进行操作。 Promise.all([methods1,methods2]).then(res=>{ //在方法1 和方法2 都请求成功时再进行操作。 }) ...
处理接口返回的统计数据 渲染到图表
m0_47713189的博客
04-11 208
处理后端返回的统计数据 渲染到图表。
SpringMVC---页面渲染与返回JSON数据
小小代码_c的博客
12-09 428
1.如何将控制层的数据渲染到页面 1.1通过自带参数Model 控制层代码: @Controller @RequestMapping("/my02") public class MyController02 { @RequestMapping("/con01") public String method01(Model model){ //model对象可以理解为request对象。凡是在该对象中保存的数据，作用范围同一个请求...
Vue在渲染页面前加载ajax请求返回的数据
clamtheelder的博客
10-04 3922
在Vue项目中遇到了这样的需求： 前端某个页面的结构是一个父组件，多个子组件通过前端路由跳转，子组件中有几个共用的下拉框，下拉框的数据从后端加载。 设计是： 先通过ajax请求从后端加载数据，缓存在另一个组件，再渲染子组件。确保只加载一次且渲染子组件前数据已经加载。 具体的实现方法是： 用Vue-Router提供的导航守卫（见官方文档：https://router.vuejs...
vue3.x 使用 provide，inject 重载页面数据
票票的博客
10-15 4060
1. 场景：在增加，修改或者删除一条记录的后希望当前页面可以重新刷新 2. 使用 provide，inject，nextTick 实现 2.1 App.vue 提供刷新方法 <template> <div class="sofa-admin-app"> <router-view v-if='isRouterAlive'/> </div> </template> <script> import { defineCompo
vue3 setup使用（详细）
杨欢博的博客
12-31 993
官网vue3-setup 总结： 1、setup 函数时，它将接受两个参数：（props、context(包含attrs、slots、emit)） 2、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之前的函数 3、执行 setup 时，组件实例尚未被创建（在 setup() 内部，this 不会是该活跃实例的引用，即不指向vue实例，Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined） 4、与模板一起使用：需要返回一
vue项目如何刷新当前页面
Umbrella_Um的博客
04-29 352
1.场景 在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。 2.遇到的问题 用 vue-router 重新路由到当前页面，页面是不进行刷新的 采用 window.location.reload() ，或者 router.go(0) 刷新时，整个浏览器进行了重新加载，闪烁，体验不好 3.解决方法 provide / inject 组合 作用：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。 App.vue: 声明
vue根据后台返回值选中select
05-11
可以通过 `v-model` 指令来实现根据后台返回值选中 `select`。假设后台返回的数据中有一个字段为 `selectedValue`，可以将这个字段的值绑定到 `select` 的 `v-model` 上，如下所示： ```html 选项1 选项2 选项3...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值