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学习笔记(四) Number 数字类型
Jun 19 Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
May 19 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
基于javaScript的this指向总结
Jul 22 Javascript
Vue.js样式动态绑定实现小结
Jan 24 Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 Javascript
微信小程序如何实现全局重新加载
Jun 05 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
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
php中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
php preg_replace替换实例讲解
2013/11/04 PHP
php显示时间常用方法小结
2015/06/05 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
node.js不得不说的12点内容
2014/07/14 Javascript
jQuery基础知识小结
2014/12/22 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
详解HTML5 使用video标签实现选择摄像头功能
2017/10/25 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
[03:01]2014DOTA2国际邀请赛 小组赛7月13日TOPPLAY
2014/07/14 DOTA
Python调用C/C++动态链接库的方法详解
2014/07/22 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
2019/08/30 Python
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
品恩科技软件测试面试题
2014/10/26 面试题
大一自我鉴定范文
2013/12/27 职场文书
在校学生职业规划范文
2014/01/08 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
能源工程专业应届生求职信
2014/03/01 职场文书
中央空调节能方案
2014/06/15 职场文书
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP
HTML基础详解(上)
2021/10/16 HTML / CSS
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL