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实现页面打印的三种方法
Mar 05 Javascript
利用jQuery接受和处理xml数据的代码(.net)
Mar 28 Javascript
js 单击式的下拉菜单效果实例
Aug 13 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
js 声明数组和向数组中添加对象变量的简单实例
Jul 28 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
JS自动生成动态HTML验证码页面
Jun 14 Javascript
Vue-Router2.X多种路由实现方式总结
Feb 09 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日历程序
2006/12/06 PHP
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
PHP实现对png图像进行缩放的方法(支持透明背景)
2015/07/15 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
jQuery 常见学习网站与参考书
2009/11/09 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
JS控制表格实现一条光线流动分割行的方法
2015/03/09 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
js时间戳转为日期格式的方法
2015/12/28 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
javascript中replace使用方法总结
2017/03/01 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
说说node中的可读流和可写流的区别
2018/06/01 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
在Python的Flask框架中实现全文搜索功能
2015/04/20 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
学习python可以干什么
2019/02/26 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
iPython pylab模式启动方式
2020/04/24 Python
Pycharm修改python路径过程图解
2020/05/22 Python
Python如何实现定时器功能
2020/05/28 Python
Python内置函数property()如何使用
2020/09/01 Python
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
就业意向协议书
2015/01/29 职场文书
python控制台打印log输出重复的解决方法
2021/05/14 Python
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL