vue条件渲染

Posted 2020-11-23 huronghua

vue条件渲染

一、v-if

v-if指令用于条件的渲染一块内容，当指令的表达式返回true时，内容才会被渲染

如果想切换多个元素，可以使用<template>元素当作不可见的包裹元素。并在上面使用v-if，最终的渲染结果不包含<template>元素。

二、v-else、v-else-if

使用 v-else 指令来表示 v-if 的“else 块”：v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if的元素之后。

三、用key管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。当你使用v-if的内容中有复用的，也有不应该复用的元素，可以需添加一个具有唯一值的 key 属性，这样就不会再复用该元素，这两个元素是相互独立。

四、v-show

用于根据条件展示元素的选项是 v-show 指令，带有v-show的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display，

当返回值为true，那么元素的display：true。（注意，v-show 不支持 <template> 元素，也不支持 v-else。）

五、v-if和v-show的区别（vue小白面试常问问题）

相同点：两者都可以控制一个元素的显示与否。

不同点：

1. 控制显示的方法不同：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；

2.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做，不会去渲染该元素；只有在条件第一次变为真时才开始局部编译; v-show是在不管初始条件是什么，都被编译，然后被缓存，而且DOM元素保留，只是简单的基于css进行切换；即v-if中当为true才会被加载渲染，为false不加载。v-show不管为true或flase，都会加载渲染

3.性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

4.使用场景：因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，当只需要一次显示或隐藏，则使用 v-if 较好。