关于vue如何解决数据渲染完成之前，dom树显示问题

最新推荐文章于 2022-12-19 23:23:35 发布
最新推荐文章于 2022-12-19 23:23:35 发布
阅读量725 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/bluesky1024/p/6808849.html
版权

在id="app"以下的标签中添加属性v-cloak

并且在css文件中添加[v-cloak]{display:none}

如果效果失效，这种原因是有几种可能，游览器大的解析加载速度有关，当css文件还没加载完毕，时会出现这种情况的

解决办法，在style标签里直接加入[v-cloak]{display:none}

转载于:https://www.cnblogs.com/bluesky1024/p/6808849.html

weixin_30763455
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DOM的加载过程
Compromise_的博客
08-16 1108
构建dom树：html解析器
vue学习：解决vue变量未渲染前代码显示问题
不吃菠菜的大力
06-16 1万+
在vue变量未渲染前，会有一瞬间显示代码，影响代码美观。vue有现成的指令来解决这个问题：v-cloak 在css中加入： [v-cloak]{ display: none; }在需要元素加上： {{demo}} 这样，v-cloak所在元素下的变量在未渲染前不会显示。
前端dom渲染和数据加载出错
qq_42748363的博客
05-25 607
前端dom渲染和数据加载出错 出错描述：第一次点击明细按钮后，报错TypeError: Cannot read property ‘loadData’ of undefined，数据未加载出来；第二次点击按钮后，数据可以加载出来。 错误分析：弹出框visible初始为false，相当于v-if=“false”。当点击按钮后，弹出框的dom渲染是异步的，还未渲染完成就执行数据加载，而this.$refs.detailGridPage就是获取指定的dom对象，此时dom对象都还未渲染完成，调用方法自然报
vue项目未加载完成前显示loading样式
jiangjunyuan168的博客
05-11 2283
1、在index.html中添加元素和绑定样式 <body> <div id="appLoading"> <div class='loading'></div> </div> <div id="app" style="display: none"></div> </body> <style media="screen" type="text/css">
学习vue框架
hehehehejiejie的博客
12-19 680
通过一个小项目mysapce来学习vue框架
vue2.0重新渲染数据三种方法
04-30
利用v-for渲染数据，通过方法改变了数据，视图没有更新，由于javascript的限制，Vue不能检测到以下变动的数组，本DEMO主要展示解决办法。
解决vue页面渲染但dom没渲染的操作
10-15
以下是一些解决Vue页面渲染但DOM未渲染问题的方法： 1. **使用`this.$nextTick()`**： 在数据更新后，Vue会在下一个DOM更新循环之后调用`this.$nextTick()`回调。在给定的代码示例中，它用于确保在DOM更新完成后再...
Vue监听数据渲染DOM完以后执行某个函数详解
10-18
今天小编就为大家分享一篇Vue监听数据渲染DOM完以后执行某个函数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中实现先请求数据再渲染dom分享
08-27
下面小编就为大家分享一篇vue中实现先请求数据再渲染dom分享，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue在页面数据渲染完成之后的调用方法
10-18
总结一下，Vue中的`$nextTick`和`watch`配合使用可以很好地解决在数据渲染完成后执行特定操作的需求。通过`watch`监听数据变化，确保我们只在数据真正更新后执行相关逻辑，而`$nextTick`则确保这些逻辑在DOM更新后...
Vue拿到后端返回的List，渲染出element-tree树结构
01-08
前言： 这是我的做法，基本上是搬运官方的办法照葫芦画瓢，我也不知道有没有更好的方法能拿到 tree组件的实例 element-tree 增加节点的方法 如果在模板中定于了 的数据源如下： 那么在当前Vue组件实例中定义并初始化数据源 export default { name: 'Tree', data(){ return{ nodeData: [ { id:999, labelName:root, children:[] }
vue中实现先请求数据再渲染dom
热门推荐
qq_20777797的博客
12-14 6万+
在项目中遇到了一个问题，下面是vue    template中的代码：   我之前的写法是 这样做的结果是下面取dom的操作，取到的dom都是undefined，也就是没有取到。 原因是并没有按照 请求数据—>渲染dom—>获取dom的顺序执行，实际的执行顺序是 先获取dom，而此时数组option中还是空的，上面的v-for循环也就没有渲染出dom，所以根本取不到（不理解
vue组件递归渲染——vue树形控件超级简单版本
qq_34996610的博客
05-14 5942
蠢蠢的效果图， 下面是源码： 树结构组件代码 <template> <div class="try"> <ul> <li v-for="item in children" :key="item.id"> <el-button type="primary" @click="change(item...
dom渲染完毕再渲染数据_vue中实现先请求数据再渲染dom分享
weixin_39618956的博客
12-22 1099
在项目中遇到了一个问题，下面是vue template中的代码：我之前的写法是这样做的结果是下面取dom的操作，取到的dom都是undefined，也就是没有取到。原因是并没有按照 请求数据—>渲染dom—>获取dom的顺序执行，实际的执行顺序是 先获取dom，而此时数组option中还是空的，上面的v-for循环也就没有渲染出dom，所以根本取不到(不理解是为什么)后来我又把请求数据...
vue项目中使用ztree树形插件，ztree请求后台数据渲染Dom
奔跑的搬运工
03-22 1万+
使用npm install jquery –save 在项目中安装ztree依赖文件 jquery; 在index.html里面引用ztree样式文件zTreeStyle.css（前面的图标可以自定义可以参考官网） 3.在项目中引入ztree文件，在main.js中引入 网上给的资料是在这里同时引入jquery；但是项目中引入 报错 impor...
vue之防止页面加载时看到花括号解决方案
Quincy.Coder的博客
12-03 6297
<style> [v-cloak]{ display:none } </style>v-cloak v-text v-htmlv-cloak用于大段v-text用于单个标签v-html用于带有标签的处理
VUE 之父组件传值给子组件，子组件监听数据渲染完后执行某函数、watch监听prop中的属性有值后再执行、prop中属性值不为空
夜阑珊妖妖
10-17 1万+
代码： <!-- 父组件 --> <div class="ulbox"> <huxing :huxing="huxing" /> </div> <!-- 子组件--> <ul class="huxingbd clearfix" ref="ul" :style="{ width: widthnum }"> <...
vue源码学习——虚拟dom树是如何定义的
titoni_yunruohan的博客
11-05 645
情景：相信通过前面的学习你已经知道了虚拟dom为什么会被构思，那么接下来你好奇的应该是作者该如何定义这个虚拟dom vnode基类的定义(源码地址https://github.com/vuejs/vue/blob/52719ccab8fccffbdf497b96d3731dc86f04c1ce/src/core/vdom/vnode.js) export default class VNode...
vue项目中发送请求获取到的数据渲染到界面之后无法对其进行DOM操作的问题
qq_41681425的博客
10-18 9577
vue.js通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触DOM。this.$nextTick()将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。它跟全局方法vue.nextTick一样，不同的是回调的this自动绑定到调用它的实例上。  this.nextTick()和this.$nextTick()的区别     this.nextTick(...
vue先加载数据再渲染dom
最新发布
06-01
在Vue中，可以使用生命周期钩子函数来实现先加载数据再渲染DOM的效果。具体来说，可以在created或mounted钩子函数中发起数据请求，然后将请求到的数据存储到组件的data选项中，最后在模板中使用这些数据渲染DOM。 例如，以下示例代码展示了如何使用Vue的created钩子函数先加载数据再渲染DOM： ``` <template> <div> <ul> <li v-for="item in list" :key="item.id">{{ item.name }}</li> </ul> </div> </template> <script> export default { data() { return { list: [] }; }, created() { // 发起数据请求 fetchData().then((data) => { // 将数据存储到组件的data选项中 this.list = data; }); } }; </script> ``` 在上述示例中，组件在created钩子函数中发起数据请求，然后将请求到的数据存储到组件的data选项中，最后在模板中使用这些数据渲染DOM。注意，模板中使用v-for指令渲染列表时，需要指定每个列表项的key属性，以便Vue能够正确地跟踪列表项的变化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值