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 去除数组的重复元素
May 04 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
js获取checkbox复选框选中的选项实例
Aug 24 Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
Bootstrap Img 图片样式(推荐)
Dec 13 Javascript
深入理解选择框脚本[推荐]
Dec 13 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
Three.js实现绘制字体模型示例代码
Sep 26 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
JavaScript工具库之Lodash详解
Jun 15 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 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
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
PHP引用符&amp;的用法详细解析
2013/08/22 PHP
PHP图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
PHP多文件上传类实例
2015/03/07 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
XHProf报告字段含义的解析
2016/05/17 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
2018/05/22 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
Vue表单控件绑定图文详解
2019/02/11 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
Python3模拟登录操作实例分析
2019/03/12 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
Python随机数函数代码实例解析
2020/02/09 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
区分python中的进程与线程
2020/08/13 Python
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
2014社区三八妇女节活动总结
2014/03/01 职场文书
实习指导老师评语
2014/04/26 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
校园文明标语
2014/06/13 职场文书
招标授权委托书样本
2014/09/23 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
Python如何导出导入所有依赖包详解
2021/06/08 Python
世界十大狙击步枪排行榜
2022/03/20 杂记