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获取FCK编辑器信息的具体方法
Jul 12 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 Javascript
Node.js的特点详解
Feb 03 Javascript
jQuery获取Table某列的值(推荐)
Mar 03 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
JavaScript中构造函数与原型链之间的关系详解
Feb 25 Javascript
Js和VUE实现跑马灯效果
May 25 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无限分类(树形类)的深入分析
2013/06/02 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
layui获取选中行数据的实例讲解
2018/08/19 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
python判断字符串是否是json格式方法分享
2017/11/07 Python
Python 找到列表中满足某些条件的元素方法
2018/06/26 Python
3分钟学会一个Python小技巧
2018/11/23 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
python如何保存文本文件
2020/06/07 Python
python字典与json转换的方法总结
2020/12/28 Python
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
New Balance波兰官方商城:始于1906年,百年慢跑品牌
2017/08/15 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
经典c++面试题二
2015/08/14 面试题
大学新生欢迎词
2014/01/10 职场文书
成龙霸王洗发水广告词
2014/03/14 职场文书
学校课外活动总结
2014/05/08 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
导游词范文
2015/02/13 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP