Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法


Posted in Javascript onOctober 12, 2018

vue中v-if 和v-else-if在页面加载的时候,不满足条件的标签会加载然后再消失掉,如果要解决这个问题,案例如下:

vue html代码块:

<div id="divApp">  
<div v-if="type === 'A'" v-cloak>    
A  
</div>  
<div v-else-if="type === 'B'" v-cloak>    
B  
</div>  
<div v-else-if="type === 'C'" v-cloak>    
C  
</div>  
<div v-else v-cloak>    
Not A/B/C  
</div>
</div>

vue js代码块:

var divApp = new Vue({  
el: '#divApp',  
data: 
{    
isActive: true,    
hasError: false,   
type: 'A'  },  
// 在 `methods` 对象中定义方法  
methods: {  
}
}
)

css 代码:

[v-cloak] 
{ 
display:none;
}

下面看下vue学习中v-if和v-show一起使用的问题

v-if和v-show一起使用

在开发项目过程中v-ifv-show一起使用时,接下面跟着的v-else会在页面上面显示两次 。代码如下:

<tbody class="sortable" id="sortTable">
   <tr v-show="items.length" v-for="(item,index) in items" :item="item">
       <td :id="item.objectId">{{index+1}}</td>
       <td>{{item.number}}</td>
   </tr>
   <tr v-else>
       <td colspan='2'>暂无数据</td>
   </tr>
</tbody>

原因其实很简单,根据vue的文档描述:

当它们都处于同一节点时,v-for 的优先级高于 v-if。这意味着,v-if 将分别在循环中的每次迭代上运行。

 也就是v-if会判断两次。

当然这样用也有它的好处,当你只想将某些项渲染为节点时,这会非常有用,如下:(以上只渲染 todos 中未完成的项。)

<li v-for="todo in todos" v-if="!todo.isComplete">
 {{ todo }}
</li>

如果你的意图与此相反,是根据条件跳过执行循环,可以将 v-if 放置于包裹元素上(或放置于

总结

以上所述是小编给大家介绍的Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript css float属性的特殊写法
Nov 13 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
Jun 24 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 Javascript
如何判断微信内置浏览器(通过User Agent实现)
Sep 01 Javascript
详解AngularJS中的http拦截
Feb 09 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
vue实现同一个页面可以有多个router-view的方法
Sep 20 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 Javascript
js实现漂亮的星空背景
Nov 01 Javascript
如何在selenium中使用js实现定位
Aug 18 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 #Javascript
开发用到的js封装方法(20种)
Oct 12 #Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 #Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
Oct 12 #Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 #Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 #Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
Oct 12 #Javascript
You might like
PHP 一个随机字符串生成代码
2010/05/26 PHP
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
Open and Print a Word Document
2007/06/15 Javascript
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
jQuery Tools tooltip使用说明
2012/07/14 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
让alert不出现弹窗的两种方法
2014/05/18 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
详解Node中导入模块require和import的区别
2017/08/11 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
js核心基础之闭包的应用实例分析
2019/05/11 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
[12:51]71泪洒现场!是DOTA2让经典重现
2014/03/24 DOTA
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
[33:23]Secret vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中使用不同编码读写txt文件详解
2015/05/28 Python
详解Python中的正则表达式
2018/07/08 Python
python设置随机种子实例讲解
2019/09/12 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
python序列类型种类详解
2020/02/26 Python
浅谈Pycharm的项目文件名是红色的原因及解决方式
2020/06/01 Python
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
质检的岗位职责
2013/11/17 职场文书
欢迎家长标语
2014/10/08 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
厉行节约工作总结
2015/08/12 职场文书
校长新学期寄语2016
2015/12/04 职场文书
python Django框架快速入门教程(后台管理)
2021/07/21 Python