关于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两行代码按指定格式输出日期时间
Oct 21 Javascript
JS批量修改PS中图层名称的方法
Jan 26 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
Aug 16 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
Vue插件打包与发布的方法示例
Aug 20 Javascript
koa-router源码学习小结
Sep 07 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
vue(2.x,3.0)配置跨域代理
Nov 27 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
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
使用PHP下载CSS文件中的图片的代码
2013/09/24 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
php封装一个异常的处理类
2017/06/08 PHP
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
js鼠标经过tab选项卡时实现切换延迟
2017/03/24 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
vue中activated的用法
2021/01/03 Vue.js
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
详解python里的命名规范
2018/07/16 Python
Python3.8中使用f-strings调试
2019/05/22 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
通信专业个人自我鉴定
2013/10/21 职场文书
委托证明的格式
2014/01/10 职场文书
给老婆的搞笑检讨书
2014/01/12 职场文书
幼儿园中秋节活动方案
2014/02/06 职场文书
可口可乐广告词
2014/03/20 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
委托书英文
2015/01/28 职场文书
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL
【海涛教你打DOTA】虚空假面第一视角骨弓3房29杀
2022/04/01 DOTA