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 实现??打印?理
Apr 28 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
JQuery复制DOM节点的方法
Jun 11 Javascript
javascript省市区三级联动下拉框菜单实例演示
Nov 29 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
微信小程序实现换肤功能
Mar 14 Javascript
详解json串反转义(消除反斜杠)
Aug 12 Javascript
js实现贪吃蛇小游戏
Oct 29 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 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简单静态页生成过程
2008/03/27 PHP
浅谈ThinkPHP的URL重写
2014/11/25 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
PHP 根据key 给二维数组分组
2016/12/09 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
基于JQuery的密码强度验证代码
2010/03/01 Javascript
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
2010/03/23 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
实例解析Python设计模式编程之桥接模式的运用
2016/03/02 Python
django rest framework之请求与响应(详解)
2017/11/06 Python
对Python3 序列解包详解
2019/02/16 Python
python地震数据可视化详解
2019/06/18 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
苹果音乐订阅:Apple Music
2018/08/02 全球购物
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
关于Java finally的面试题
2016/04/27 面试题
热门专业求职信
2014/05/24 职场文书
2015年教研组工作总结
2015/05/04 职场文书
javascript代码简写的几种常用方式汇总
2021/08/23 Javascript
mysql查找连续出现n次以上的数字
2022/05/11 MySQL
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js
python内置模块之上下文管理contextlib
2022/06/14 Python