关于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 相关文章推荐
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 Javascript
javascript十六进制及二进制转化的方法
May 06 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
webpack 模块热替换原理
Apr 09 Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 Javascript
JS Thunk 函数的含义和用法实例总结
Apr 08 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
Jul 21 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中date()日期函数有关参数整理
2011/07/19 PHP
php实现与erlang的二进制通讯实例解析
2014/07/23 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
PHP中非常有用却鲜有人知的函数集锦
2019/08/17 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
es6数值的扩展方法
2019/03/11 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
JavaScript布尔运算符原理使用解析
2020/05/06 Javascript
详解Vue之事件处理
2020/07/10 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
Python3.6简单操作Mysql数据库
2017/09/12 Python
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
pandas 层次化索引的实现方法
2019/07/06 Python
Python计算IV值的示例讲解
2020/02/28 Python
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
运动会入场式解说词
2014/02/18 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
四风问题党员个人整改措施
2014/10/27 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
庆七一主持词
2015/06/29 职场文书
2016党员入党决心书
2015/09/22 职场文书
教学反思怎么写
2016/02/24 职场文书