返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue异步请求数据重新渲染方式
  • 822
分享到

vue异步请求数据重新渲染方式

2024-04-02 19:04:59 822人浏览 泡泡鱼
摘要

目录Vue异步请求数据重新渲染下面介绍一种方法解决自定义组件异步获取数据重新渲染视图层逻辑层vue异步请求数据重新渲染 vue异步请求数据时往往不能及时更新, 下面介绍一种方法解决

vue异步请求数据重新渲染

vue异步请求数据时往往不能及时更新,

下面介绍一种方法解决

export default {
        name: "pic",
        created() {
           this.getList();
        },
        data(){
            return{num:[]}
        },
        methods:{
            getList(){
                fetch('https://localhost:3000/get-banner-list').then(data=>{
                    return data.JSON()
                }).then((data)=>{this.num=data.data;console.log(this.num)})
            }
        }
    }

这个时候template标签里面的数据还没有更新,所以可以这样

<div class="propagate" v-show="num.length>0">
        <ul>
           <li  v-for="(item,index) in num" :key="index">
              <img :src="item.photo_url" :key="index">
           </li>
        </ul>
    </div>

等数据加载完再显示

自定义组件异步获取数据重新渲染

视图层

<myCard v-if="countView" icon="icon-yonghuzu" bGColor="#2d8cf0" :count="homeData.GovtCount" title="标题名称"></myCard>

逻辑层

data(){
    return {
            countView:true
        }
    }
//重新渲染组件
        _this.countView=false
        _this.$nextTick(()=>{
            _this.countView=true
        })

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue异步请求数据重新渲染方式

本文链接: https://lsjlt.com/news/163535.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue异步请求数据重新渲染方式
    目录vue异步请求数据重新渲染下面介绍一种方法解决自定义组件异步获取数据重新渲染视图层逻辑层vue异步请求数据重新渲染 vue异步请求数据时往往不能及时更新, 下面介绍一种方法解决 ...
    99+
    2024-04-02
  • vue异步数据对页面渲染的影响
    这篇文章主要介绍“vue异步数据对页面渲染的影响”,在日常操作中,相信很多人在vue异步数据对页面渲染的影响问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue异步数据对页面...
    99+
    2024-04-02
  • react请求数据并渲染的方法是什么
    在React中,可以使用fetch或axios等库来发送请求并获取数据。一般情况下,在组件的生命周期方法中发送请求并在获取到数据后进...
    99+
    2023-10-07
    react
  • uniapp网络请求后怎么数据渲染
    Uniapp是一个跨平台的开发框架,可以轻松地将一个应用发布到多个平台,例如iOS和Android。在Uniapp中,我们可以使用Vue.js来编写应用程序,并且在网络请求后,可以使用Vue的数据绑定功能来动态地渲染数据。网络请求是很常见的...
    99+
    2023-05-14
  • 解决vue修改数据页面不重新渲染问题
    目录vue渲染机制和如何解决数据修改页面不刷新问题的多种方法vue渲染机制和如何解决数据修改页面不刷新问题的多种方法 本文不讲原理,只讲干货易懂易学 首先 第一点,vue底层是 将d...
    99+
    2023-03-24
    vue修改数据页面 修改页面不重新渲染
  • 小程序请求数据后如何渲染页面
    在小程序使用onLoad事件请求数据后实现页面渲染,实现代码如下:onLoad:function(){var that = thiswx.request({url:url, //url请求数据的地址method:"POST",data:{....
    99+
    2024-04-02
  • Egg Vue SSR服务端渲染数据请求与asyncData的示例分析
    小编给大家分享一下Egg Vue SSR服务端渲染数据请求与asyncData的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!服务端渲染 Node 层直接获取数据在 Egg 项目如...
    99+
    2024-04-02
  • vue封装echarts组件,数据动态渲染方式
    目录vue封装echarts组件,数据动态渲染vue动态渲染echarts图表第一步,选择标签第二步 处理服务端返回的数据第三步 创建图表数据vue封装echarts组件,数据动态渲...
    99+
    2022-12-08
    vue封装echarts组件 数据动态渲染 vue封装echarts vue渲染
  • SpringMVC重新定向redirect请求中携带数据方式
    目录SpringMVC 重新定向redirect请求中携带数据使用URL模版重定向使用flash属性SpringMVC 几种重定向携带数据方法1.拼接字符串2.采用RedirectA...
    99+
    2024-04-02
  • vue修改数据页面不重新渲染问题如何解决
    本文小编为大家详细介绍“vue修改数据页面不重新渲染问题如何解决”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue修改数据页面不重新渲染问题如何解决”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。vue渲染机制...
    99+
    2023-07-05
  • react如何请求数据异步
    这篇文章主要讲解了“react如何请求数据异步”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“react如何请求数据异步”吧!react请求数据异步的方法:1、通过“npm i redux-t...
    99+
    2023-07-04
  • react怎么请求数据异步
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react怎么请求数据异步?react异步请求数据方法。关于react异步请求数据有很多种方案。1、saga (用了er6生成器函数)2、promise3...
    99+
    2023-05-14
    React
  • Vue用Axios异步请求API的方法
    这篇文章主要介绍“Vue用Axios异步请求API的方法”,在日常操作中,相信很多人在Vue用Axios异步请求API的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vu...
    99+
    2024-04-02
  • Vue中关于重新渲染组件的方法及总结
    目录重新渲染组件的方法总结重新加载整个页面使用forceUpdate总结重新渲染组件的方法总结 有时Vue的反应性系统还不够,您只需要重新渲染组件即可。 重新渲染组件有以下...
    99+
    2022-12-03
    Vue重新渲染组件 Vue重新渲染 Vue渲染组件
  • React如何使用axios请求数据并把数据渲染到组件
    目录一、安装boostrap、axios二、在src目录下新建一个List.js,在List.js中三、在app.js中引入List.js并渲染四、在create-react-app...
    99+
    2022-11-13
    React使用axios React axios请求数据 React 请求数据并渲染
  • 解决vue组件渲染没更新数据问题
    目录问题:现象:原因解决步骤问题: 使用前端日期控件时 - 数据联动时数据绑定无效问题 现象: 选择A日期,想动态改变B日期数据,只有第一次选择时会动态改变B日期数据,第二次选择A日...
    99+
    2023-02-09
    vue组件渲染没更新 vue组件渲染
  • vue-cli实现异步请求返回mock模拟数据
      在前后端分离开发的过程中,前端开发过程中,页面的数据显示一般都是写死的静态数据,也就是没有经过接口,直接写死在代码中的,在后端给出接口后,再替换为接口数据,为了减少对接成本,mo...
    99+
    2024-04-02
  • react异步请求数据的方法是什么
    在React中,常用的异步请求数据的方法有以下几种:1. 使用fetch API:fetch是现代浏览器提供的一种用于进行网络请求的...
    99+
    2023-08-19
    react
  • Spring中注解方式的异步请求
    一、Servlet3.0异步请求 @WebServlet(value = "/async", asyncSupported = true) public class HelloA...
    99+
    2024-04-02
  • SpringMVC如何重新定向redirect请求中携带数据方式
    这篇文章给大家分享的是有关SpringMVC如何重新定向redirect请求中携带数据方式的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。SpringMVC 重新定向redirect请求中携带数据在控制器方法返回的...
    99+
    2023-06-22
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作