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 相关文章推荐
jquery 弹出层实现代码
Oct 30 Javascript
javascript 面向对象全新理练之数据的封装
Dec 03 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
Dec 04 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
Vue render深入开发讲解
Apr 13 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
vuex的module模块用法示例
Nov 12 Javascript
Vue.js路由实现选项卡简单实例
Jul 24 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 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中json_decode()和json_encode()的使用方法
2012/06/04 PHP
解析PHP实现下载文件的两种方法
2013/07/05 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
javascript indexOf函数使用说明
2008/07/03 Javascript
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
jquery.validate分组验证代码
2011/03/17 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
jQuery背景插件backstretch使用指南
2015/04/21 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
基于jQuery实现的设置文本区域的光标位置
2018/06/15 jQuery
Vuex入门到上手教程
2018/06/20 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
Python中异常重试的解决方案详解
2017/05/05 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
python 爬取小说并下载的示例
2020/12/07 Python
HTML5实现移动端复制功能
2018/04/19 HTML / CSS
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
客户付款通知书
2015/04/23 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
Python循环之while无限迭代
2022/04/30 Python