关于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,jQuery 排序的实现代码,网页标签排序的实现,标签排序
Apr 27 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 Javascript
Javascript获取图片原始宽度和高度的方法详解
Sep 20 Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
Jun 14 Javascript
在页面中引入js的两种方法(推荐)
Aug 29 Javascript
如何用Node写页面爬虫的工具集
Oct 26 Javascript
理理Vue细节(推荐)
Apr 16 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
JavaScript通如何过RGraph实现动态仪表盘
Oct 15 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
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
Memcached常用命令以及使用说明详解
2013/06/27 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
PHP ADODB实现分页功能简单示例
2018/05/25 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
javascript中的缓动效果实现程序
2012/12/29 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
2014/09/06 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
node.js 抓取代理ip实例代码
2017/04/30 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
python通过socket查询whois的方法
2015/07/18 Python
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
python实现低通滤波器代码
2020/02/26 Python
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
机修工岗位职责
2013/11/24 职场文书
结构工程个人自荐信范文
2013/11/30 职场文书
投标承诺书范本
2014/03/27 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
领导欢迎词范文
2015/01/26 职场文书
安装工程师岗位职责
2015/02/13 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python