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 相关文章推荐
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
Feb 07 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 Javascript
JavaScript实现继承的4种方法总结
Oct 16 Javascript
Javascript实现Web颜色值转换
Feb 05 Javascript
jquery实现简单的自动播放幻灯片效果
Jun 13 Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 Javascript
浅谈Express异步进化史
Sep 09 Javascript
基于jquery实现五星好评
Nov 18 jQuery
Vue如何基于es6导入外部js文件
May 15 Javascript
AJAX实现省市县三级联动效果
Oct 16 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
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
用Javascript读取中文COOKIE的解决办法
2007/02/15 Javascript
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
jsonp跨域请求详解
2017/07/13 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
AngularJS路由删除#符号解决的办法
2017/09/28 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
vue+animation实现翻页动画
2020/06/29 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
python开发之list操作实例分析
2016/02/22 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
Python列表切片常用操作实例解析
2020/03/10 Python
python实现横向拼接图片
2020/03/23 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
介绍一下OSI七层模型
2012/07/03 面试题
幼儿园小班评语
2014/04/18 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
Python实现位图分割的效果
2021/11/20 Python