Vue.js中v-show和v-if指令的用法介绍

目录

  • 一、v-show指令
  • 二、v-if指令
  • 三、v-show和v-if的区别
  • 四、v-else指令
  • 五、v-else-if

一、v-show指令 v-show指令可以用来动态的控制DOM元素的显示或隐藏。v-show后面跟的是判断条件,语法如下:
v-show="判断变量"

例如:
v-show="true",表示显示DOM元素。
v-show="false", 表示隐藏DOM元素。
看下面的示例:
v-show指令 - 锐客网
  • Vue.js中v-show和v-if指令的用法介绍
    文章图片

运行效果:
Vue.js中v-show和v-if指令的用法介绍
文章图片

将flag变量改为false,代码如下:
v-show指令 - 锐客网
  • Vue.js中v-show和v-if指令的用法介绍
    文章图片

运行效果:
Vue.js中v-show和v-if指令的用法介绍
文章图片

这里只会显示三个,但不会显示img元素。

二、v-if指令 v-if指令的用法和v-show指令的用法相同,都是用来控制DOM元素的显示或隐藏。代码示例如下:
v-if指令 - 锐客网
  • Vue.js中v-show和v-if指令的用法介绍
    文章图片

运行效果:
Vue.js中v-show和v-if指令的用法介绍
文章图片


三、v-show和v-if的区别 v-show和v-if都可以用来控制DOM元素的显示或隐藏,那么这两个指令有什么区别呢?
v-show和v-if指令的区别主要在于设置DOM元素隐藏的时候:
  • v-show指令设置隐藏是为该元素添加css样式--display:none,但DOM元素还存在
  • v-if指令设置隐藏是将DOM元素整个删除,DOM元素不在存在
看下面的示例:
v-show设置隐藏:
v-show指令 - 锐客网
  • Vue.js中v-show和v-if指令的用法介绍
    文章图片

检查元素:
Vue.js中v-show和v-if指令的用法介绍
文章图片

从生成的HTML结构中可以看出,索引不等于的元素被隐藏了,只是添加了CSS样式:display:node,但是该元素还存在。下面看看v-if
v-if指令 - 锐客网
  • Vue.js中v-show和v-if指令的用法介绍
    文章图片

检查元素:
Vue.js中v-show和v-if指令的用法介绍
文章图片

从生成的HTML结构中可以看出,索引不等于1的元素被隐藏了,这里是直接删除了img元素,不占用位置。
更详细的区别:(借鉴别人博客内容,博客地址://www.jb51.net/article/240646.htm)
  • 1.手段:v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐;
  • 2.编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换;
  • 3.编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载); v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素保留;
  • 4.性能消耗:v-if有更高的切换消耗;v-show有更高的初始渲染消耗;
  • 5.使用场景:v-if适合运营条件不大可能改变;v-show适合频繁切换。

四、v-else指令 v-else指令不需要表达式,但有一个限制条件:前一兄弟元素必须有v-if或者v-else-if指令。
用法:为v-if或者v-else-if添加“else 块”。
看下面的代码:
Vue指令:v-if v-else - 锐客网num值:{{num}}5" id="div1">Now you see meNow you don't

浏览器运行结果:
Vue.js中v-show和v-if指令的用法介绍
文章图片

可以看到:num的值不大于5,所以v-if表达式的值为false,所以会显示v-else指令所在标签。
【Vue.js中v-show和v-if指令的用法介绍】
五、v-else-if v-else-if使用限制:前一兄弟元素必须有v-if或者v-else-if。
用法:v-else-if表示v-if的“else-if”块,可以链式调用。
看下面代码:
Vue指令:v-if v-else - 锐客网A BCNot A/B/C

浏览器运行结果:
Vue.js中v-show和v-if指令的用法介绍
文章图片

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    推荐阅读