解决vue在发请求后渲染页面，页面刚开始没有数据的情况

已于 2022-09-22 20:03:36 修改
阅读量2.3k 收藏 2
点赞数 4
分类专栏： vue 文章标签： javascript 前端 开发语言
于 2022-09-09 21:41:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53458653/article/details/126789585
版权

Vue v-if 数据绑定 状态管理 条件渲染
关键词由CSDN通过智能技术生成

使用v-if判断数据的状态。
我们在刚开始的时候将数据data的值设为null

然后在页面中需要数据的盒子上设置v-if="data!null"     
当数据为空时 -----该元素移除
数据请求回来后----该元素显示


 

       <div v-if="data!=null">

                {{data}}

        </div>

杜～｜
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue一个页面发出多个异步请求_使用Vue观察者实现一个简单异步无限滚动效果
weixin_39719078的博客
12-20 312
无限滚动(Infinite Scroll)是一种很常见的用户体验模式，它建议用户在Web页面或应用程序加载显示很少的内容。当用户开始向下滚动页面时，会加载更多内容。这些内容是通过向负责提供内容的服务器发出请求来异步加载的。在这篇文章中，我将讨论JavaScript的异步操作以及Vue如何实现无限滚动效果。在这个过程中，我们将看到一个使用无限增发动的简单页面。理解异步操作在程序中编写一段同步代码，比...
vue 解决数组赋值无法渲染在页面的问题
10-16
总结来说，解决Vue中数组赋值无法渲染在页面的问题，关键在于： 1. 确保`this`指向正确，尤其是在异步操作中，可以使用箭头函数保持正确的上下文。 2. 使用Vue提供的数组变异方法（如`push()`、`splice()`等）来...
vue异步请求数据渲染页面，引入方式使用，新手Vue体验
王小右的博客
01-28 8381
最基础的Vue 请求渲染数据，包括下拉加载更多，换分类。首先声明一点我写这个只是个人业余写的只为自己练习技术，页面是抓的二十次幂这个站点 https://www.ershicimi.com/ 首先我之前没有学过Vue 只是了解一些html和js的知识，然后自己写了一些接口，想学一下啊用Vue实现下请求渲染数据. 我只用了两天时间实现的以下效果，感觉还行，我都是按照自己想法写的，可能不正规。 说一...
vue中拿到接口，并获取数据，渲染到页面
热门推荐
lyclyc_的博客
11-22 4万+
首先index.html完成的是单页面展示，app.vue里面已经写了视图出口， 例如;先新建一个role.vue页面，写上相应的布局和内容，然后在路由中添加这个页面。 然后开始写渲染数据的方法 前提，封装好了获取数据的api接口,并在main,js中注册到了原型。 然后在 1，首先在api中获取接口， 2，在utils中封装http请求的get 和post方法，并注册到原型 import axios from "axios" // 添加一个请求拦截器，回调函数会在发出请求时执行 // conf
Vue3异步请求获取数据在渲染时不显示的问题
m0_46527751的博客
05-24 1万+
Vue3异步请求获取数据在渲染时不显示的问题 获取对象数组 let goodmessagelist:IArticle[]= reactive([]) onMounted(async()=>{ let res = await posts() /* 这里不能直接goodmessagelist = res.rows */ goodmessagelist.push(...res.rows) }), 参考：使用vue3中的异步 获
$nextTick —— vue中实现请求数据后渲染dom
提莫拌一团蘑菇
03-31 1305
我们先看下面代码示例效果1）示例 <body> <div id="app" > <div id='div' v-if="showDiv">这是一段文本</div> <button @click="getText">获取div内容</button> </div>...
关于Vue中页面成功渲染数据undefined的问题
蔡定交
03-04 4152
undefined问题 其实就是数据还没拿到就渲染了一次造成的，解决的办法也有很多，个人觉得不影响使用，但老有人问为啥会一开始显示undefined，也懒得解释了，改吧。。 方法 网上搜了一下，大概就是给个默认值、判断字段值存在时再显示等等。个人觉得还是来个干脆点的。 用watch监听数据，让数据加载完成后再显示dom，数据获取期间显示加载中…… <template> <view style="background-color: #ffe1cd;height: 100vh;backgro
Vue3数据更新，页面没有同步更新的问题
weixin_49267032的博客
06-28 1644
Vue3中数据更新，DOM没有随之更新的问题
Vue的生命周期钩子函数和初始化页面在哪发送请求数据合适
，
02-11 2386
Vue的生命周期 vue生命周期 Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。 生命周期钩子函数 vue提前定义在组件生命周期各个阶段上，一旦发生到这个阶段，就会自动调用的函数。 包括: 4个阶段和8个钩子函数: ​ 创建组件对象前自动执行: beforeCreate() 1 创建阶段: ​ 创建组件对象后自动执行: created() ​ 将新HTML内
从解决一个页面请求太多的问题开始的
a1014981613的博客
04-17 545
上周测试同事给我提了个问题，说是运营系统的某个编辑页面中一个请求调用太多次了，看看怎么回事。我刚听说心里不屑一顾：能有多少次啊。结果测试环境打开页面一看，直呼好家伙！一个页面调用了30次请求，这真是捅了麻雀窝了。
Vue在页面数据渲染完成之后的调用方法
10-18
在Vue.js开发中，有时我们需要确保页面数据完全渲染完成后执行某些操作，比如计算元素高度、初始化第三方库等。Vue提供了一种机制来处理这种情况，即`$nextTick`方法和`watch`对象。下面我们将详细讲解这两个关键...
浅谈vue异步数据影响页面渲染
10-16
今天小编就为大家分享一篇浅谈vue异步数据影响页面渲染，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue页面渲染但dom没渲染的操作
10-15
在Vue.js应用中，有时会出现页面内容已更新但DOM（文档对象模型）未相应更新的情况。这通常是由于Vue的响应式系统未能及时检测到数据变化，或者是在Vue生命周期的不恰当时间进行了DOM操作。以下是一些解决Vue页面...
vue中实现先请求数据再渲染dom分享
08-27
下面小编就为大家分享一篇vue中实现先请求数据再渲染dom分享，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 641
JavaScript青少年简明教程：函数及其相关知识（下）
【React 】开发环境搭建详细指南
lph159的博客
07-24 1333
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
最新发布
努力做最接地气的编程干货分享，感谢关注
07-29 869
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 255
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue+axios请求数据渲染页面
06-07
好的，这是一个常见的前端操作。首先，你需要在前端项目中安装 Vue 和 axios 这两个库。可以通过命令行运行以下命令进行安装： ``` npm install vue axios --save ``` 安装完成后，你需要在你的 Vue 组件中引入 axios，并使用 axios 发送请求获取数据。以下是一个简单的例子： ```html <template> <div> <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul> </div> </template> <script> import axios from 'axios' export default { data() { return { items: [] } }, mounted() { axios.get('/api/items') // 这里的 /api/items 是你后端接口的地址 .then(response => { this.items = response.data }) .catch(error => { console.log(error) }) } } </script> ``` 在这个例子中，我们首先在 data 方法中定义了一个数组 items 来存放获取到的数据。然后在 mounted 钩子函数中，使用 axios 发送了一个 GET 请求，获取后端接口返回的数据，并将数据存放到 items 数组中。最后，我们在模板中使用了 v-for 指令来循环展示数据。 当然，这只是一个简单的例子，实际中可能会涉及到更多的操作。但是核心思路都是相同的：使用 axios 发送请求获取数据，然后将数据渲染到页面上。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值