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 相关文章推荐
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
Dec 22 Javascript
JQuery设置文本框和密码框得到焦点时的样式
Aug 30 Javascript
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
Feb 08 Javascript
javascript无刷新评论实现方法
May 13 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
详解基于React.js和Node.js的SSR实现方案
Mar 21 Javascript
Vue使用watch监听一个对象中的属性的实现方法
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
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
jQuery 事件的命名空间简单了解
2013/11/22 Javascript
jQuery制作简洁的多级联动Select下拉框
2014/12/23 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
2017/01/20 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
Python模块学习 re 正则表达式
2011/05/19 Python
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
python 整数越界问题详解
2019/06/27 Python
python实现的生成word文档功能示例
2019/08/23 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
大门门卫岗位职责
2013/11/30 职场文书
迟到检讨书800字
2014/01/13 职场文书
药品促销活动方案
2014/02/14 职场文书
有子女的离婚协议书怎么写(范本)
2014/09/29 职场文书
公务员个人考察材料
2014/12/23 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js