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 2.0实用简明教程 之ExtJS版的Hello
Apr 29 Javascript
php对mongodb的扩展(初识如故)
Nov 11 Javascript
jquery(hide方法)隐藏指定元素实例
Nov 11 Javascript
用js代码改变单选框选中状态的简单实例
Dec 18 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
asp.net+js实现金额格式化
Feb 27 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 Javascript
js 获取扫码枪输入数据的方法
Jun 10 Javascript
用js实现放大镜效果
Oct 28 Javascript
react 项目中引入图片的几种方式
Jun 02 Javascript
JS 4个超级实用的小技巧 提升开发效率
Oct 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
解析php类的注册与自动加载
2013/07/05 PHP
php中spl_autoload详解
2014/10/17 PHP
PHP实现无限级分类(不使用递归)
2015/10/22 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
基于jQuery实现二级下拉菜单效果
2016/02/01 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
跟老齐学Python之编写类之二方法
2014/10/11 Python
Python实现基本线性数据结构
2016/08/22 Python
python如何统计代码运行的时长
2019/07/24 Python
python scipy卷积运算的实现方法
2019/09/16 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
css3实现信纸/同学录效果的示例代码
2018/12/11 HTML / CSS
意大利奢侈品购物网站:Giglio
2018/01/05 全球购物
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
咖啡蛋糕店创业计划书
2014/01/28 职场文书
升旗仪式演讲稿
2014/05/08 职场文书
围城读书笔记
2015/06/26 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python
详解MySQL主从复制及读写分离
2021/05/07 MySQL