一, 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 较好.
来源: http://www.bubuko.com/infodetail-3336400.html