v-if
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。
v-if是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
v-show
v-show使用方法大致和v-if一样,只不过v-show不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS display
特别提醒: v-show 不支持 template元素 也不支持 v-else
题外话
在v-for中使用条件渲染时,要注意不能直接使用v-if,可以在需要做判断的元素上加一层<template>标签,或者使用v-show