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对象、属性、事件手册集合方便查询
Jul 04 Javascript
在JavaScript中获取请求的URL参数[正则]
Dec 25 Javascript
js中if语句的几种优化代码写法
Mar 12 Javascript
基于Jquery的开发个代阴影的对话框效果代码
Jul 28 Javascript
Jquery解析json数据详解
Dec 26 Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
Dec 17 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
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
PHP 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
Zend Framework数据库操作方法实例总结
2016/12/11 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
PHP使用HTML5 FormData对象提交表单操作示例
2019/07/02 PHP
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
基于JavaScript实现的快速排序算法分析
2017/04/14 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
2017/12/28 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
开发用到的js封装方法(20种)
2018/10/12 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
python实现单链表的方法示例
2019/09/03 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
药学专业个人自我评价
2013/11/11 职场文书
表彰会主持词
2014/03/26 职场文书
公司担保书格式范文
2014/05/12 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
采购员岗位职责
2015/02/03 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书