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中的toFixed固定小数位数 简单实例分享
Jul 12 Javascript
仿百度输入框智能提示的js代码
Aug 22 Javascript
浅析Javascript使用include/require
Nov 13 Javascript
jquery easyui使用心得
Jul 07 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
Dec 03 Javascript
AngularJS中比较两个数组是否相同
Aug 24 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
基于Vuejs和Element的注册插件的编写方法
Jul 03 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
vue实现直播间点赞飘心效果的示例代码
Sep 20 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 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 日期时间处理函数小结
2009/12/18 PHP
php中try catch捕获异常实例详解
2014/11/21 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
javascript+iframe 实现无刷新载入整页的代码
2010/03/17 Javascript
JQuery radio(单选按钮)操作方法汇总
2015/04/15 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
Python3实现的简单三级菜单功能示例
2019/03/12 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
Linux面试题LINUX系统类
2014/11/19 面试题
银行门卫岗位职责
2013/12/29 职场文书
服装设计专业自荐书范文
2013/12/30 职场文书
大学毕业后的十年规划
2014/01/07 职场文书
党员培训思想汇报
2014/01/07 职场文书
贷款委托书范本
2014/04/08 职场文书
老师对学生的评语
2014/04/18 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
岗位职责说明书模板
2014/07/30 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
工作报告范文
2019/06/20 职场文书
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏