关于vuejs中v-if和v-show的区别及v-show不起作用问题


Posted in Javascript onMarch 26, 2018

1.官网概念描述

v-if 是'真正的'条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建.

v-if 也是惰性的,如果在初始渲染时条件为假,那么什么都不做- - 直到条件第一次为真的时候才会开始渲染条件块,相比之下,v-show就简单得多- - 不管初始条件是什么,元素总会被渲染,并且只是简单的基于css进行切换.

一般来说,v-if 有更高的切换开销,而 v-show 有更高的出事渲染开销.因此,如果需要非常频繁的切换,那么使用v-show好一点;如果在运行时条件不太可能改变,则使用v-if 好点.

2.实践结果

摘录: 如果用v-if的话,整个dom结构压根就不会出现在页面上,如果是用v-show的话,要视后面的条件来定,如果是true,则显示,如果为false,则加上style=”display:none”. 所以呢,如果是组件之类的大块头,个人觉得用v-if更好一些,如果是一些暂时性隐藏,一会要显示的,还是v-show更方便。对于v-style和v-show来比较,v-show相当于是v-style=”display:none”v-style=”display:block”的快捷方式。

1. v-show不起作用问题

最近在用vue_element-ui开发多页面应用,其中遇到v-show不起作用问题.

a.问题描述,如下图(预想达到的效果),其中表格数据是动态变化的,包括标题也会根据后台数据发生改变,如果后台返回的标题为空,那么就不显示该列的内容.反之则显示该列的所有数据.

关于vuejs中v-if和v-show的区别及v-show不起作用问题

部分代码如下:

关于vuejs中v-if和v-show的区别及v-show不起作用问题

执行上图出现的效果图如下:

关于vuejs中v-if和v-show的区别及v-show不起作用问题

那么就会出现上图的效果,也就是v-show没能隐藏标题值为null的那列数据

b.解决方法:

将v-show改为v-if即可实现图一中的效果.

c.总结(个人见解):

由于el-table-column会生成多行标签元素,根据v-show是不支持template语法的,推断出v-show不能显示隐藏多个元素?不知是否

可以这样理解,望大神告知!所以这种情况下只能用v-if来实现.

另外补充,在渲染多个元素时候可以把一个<template>元素作为包装元素,并在上面使用v-if进行条件判断,最终的渲染并不会包含这个元素.同时,v-show不支持<template>语法.

总结

以上所述是小编给大家介绍的关于vuejs中v-if和v-show的区别及v-show不起作用问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 创建对象
Jul 17 Javascript
js跨域问题之跨域iframe自适应大小实现代码
Jul 17 Javascript
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
前端jquery部分很精彩
May 03 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
Js中async/await的执行顺序详解
Sep 22 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
vue 微信扫码登录(自定义样式)
Jan 06 Javascript
原生JS实现留言板
Mar 26 Javascript
JavaScript链式调用原理与实现方法详解
May 16 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
Mar 26 #Javascript
Vue中v-show添加表达式的问题(判断是否显示)
Mar 26 #Javascript
使用Vue构建可重用的分页组件
Mar 26 #Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 #jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 #jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 #jQuery
Angular 组件之间的交互的示例代码
Mar 24 #Javascript
You might like
收藏的PHP常用函数 推荐收藏保存
2010/02/21 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
PHP语法自动检查的Vim插件
2014/08/11 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
JS实现div居中示例
2014/04/17 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
从零学Python之入门(四)运算
2014/05/27 Python
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
Python 比较两个数组的元素的异同方法
2017/08/17 Python
Python利用multiprocessing实现最简单的分布式作业调度系统实例
2017/11/14 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
基于Tensorflow批量数据的输入实现方式
2020/02/05 Python
Python表达式的优先级详解
2020/02/18 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
资深财务管理人员自我评价
2013/09/22 职场文书
音乐教学随笔感言
2014/02/19 职场文书
爸爸的花儿落了教学反思
2014/02/20 职场文书
学习雷锋活动总结
2014/04/29 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android