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 相关文章推荐
js禁止小键盘输入数字功能代码
Aug 01 Javascript
javascript之querySelector和querySelectorAll使用介绍
Dec 20 Javascript
javascript回车完美实现tab切换功能
Mar 13 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
Jul 01 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
jquery获取点击控件的绝对位置简单实例
Oct 13 Javascript
jQuery简单自定义图片轮播插件及用法示例
Nov 21 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
Dec 26 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
JavaScript使用ZeroClipboard操作剪切板
May 10 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
第十二节 类的自动加载 [12]
2006/10/09 PHP
新版PHP极大的增强功能和性能
2006/10/09 PHP
Snoopy类使用小例子
2008/04/15 PHP
PHP中shuffle数组值随便排序函数用法
2014/11/21 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
php实现微信公众号无限群发
2015/10/11 PHP
实现PHP搜索加分页
2016/10/12 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
浅谈Javascript事件模拟
2012/06/27 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
Python实现远程调用MetaSploit的方法
2014/08/22 Python
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
Python HTMLTestRunner库安装过程解析
2020/05/25 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
德国机车企业:FC-Moto
2017/10/27 全球购物
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
Java面试笔试题大全
2016/11/23 面试题
中英文自我评价语句
2013/12/20 职场文书
微观世界观后感
2015/06/10 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python