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 相关文章推荐
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
jQuery对象的length属性用法实例
Dec 27 Javascript
js判断登陆用户名及密码是否为空的简单实例
May 16 Javascript
JavaScript 函数的定义-调用、注意事项
Apr 16 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
使用express+multer实现node中的图片上传功能
Feb 02 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
Aug 22 Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 Javascript
vue循环数组改变点击文字的颜色
Oct 14 Javascript
一百多行代码实现react拖拽hooks
Mar 23 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文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
PHP获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
php数据访问之增删改查操作
2016/05/09 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
js内置对象 学习笔记
2011/08/01 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
jQuery轻松实现无缝轮播效果
2017/03/22 jQuery
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
使用PYTHON接收多播数据的代码
2012/03/01 Python
python使用BeautifulSoup分页网页中超链接的方法
2015/04/04 Python
python实现在字符串中查找子字符串的方法
2015/07/11 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
Linux 修改Python命令的方法示例
2018/12/03 Python
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
大专生简历的自我评价
2013/11/26 职场文书
管事部库房保管员岗位职责
2014/02/21 职场文书
预防传染病方案
2014/06/14 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
go select编译期的优化处理逻辑使用场景分析
2021/06/28 Golang
javascript的var与let,const之间的区别详解
2022/02/18 Javascript