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 while语句和do while语句的区别分析
Dec 08 Javascript
jquery easyui 结合jsp简单展现table数据示例
Apr 18 Javascript
input:checkbox多选框实现单选效果跟radio一样
Jun 16 Javascript
jQuery插件开发的五种形态小结
Mar 04 Javascript
JavaScript使用slice函数获取数组部分元素的方法
Apr 06 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
JavaScript reduce和reduceRight详解
Oct 24 Javascript
javascript获取以及设置光标位置
Feb 16 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
Mar 21 Javascript
JS实现元素上下左右移动效果
Oct 18 Javascript
基于vue+canvas的excel-like组件实例详解
Nov 28 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 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
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
php实现RSA加密类实例
2015/03/26 PHP
简单实现PHP留言板功能
2016/12/21 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
javascript 学习之旅 (2)
2009/02/05 Javascript
JavaScript 继承的实现
2009/07/09 Javascript
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
详解从Vue-router到html5的pushState
2018/07/21 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
js实现前面自动补全位数的方法
2018/10/10 Javascript
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
2019/05/01 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
js实现扫雷源代码
2020/11/27 Javascript
Python实现简单的代理服务器
2015/07/25 Python
python 实时遍历日志文件
2016/04/12 Python
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
武汉某公司的C#笔试题面试题
2015/12/25 面试题
活动总结格式范文
2014/04/26 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
劳资员岗位职责
2015/02/13 职场文书
护士医德考评自我评价
2015/03/03 职场文书
秋菊打官司观后感
2015/06/03 职场文书
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js