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 相关文章推荐
js 替换
Feb 19 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
May 28 Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 Javascript
小程序如何获取多个formId实现详解
Sep 20 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 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/22 PHP
php addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
PHP实现的回溯算法示例
2017/08/15 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
AngularJS页面带参跳转及参数解析操作示例
2017/06/28 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
2017/07/24 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
JS原型prototype和__proto__用法实例分析
2020/03/14 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
2020/03/20 jQuery
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
python实现复制文件到指定目录
2019/10/16 Python
Numpy 理解ndarray对象的示例代码
2020/04/03 Python
Python绘图实现台风路径可视化代码实例
2020/10/23 Python
python实现双人五子棋(终端版)
2020/12/30 Python
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
手机促销活动方案
2014/02/05 职场文书
情况说明书格式范文
2014/05/06 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书