要明确两个都是作为条件渲染的指令
v-if
- 表达式返回
truthy值时渲染； - 可配合
v-else和v-else-if使用（ 注意v-else、v-else-if元素必须紧跟在带v-if或者v-else-if的元素的后面 ）； v-if可以 在<template>元素中使用；，最终渲染结果不会出现<template>；- 条件渲染中如果有被复用元素，建议使用
key值， 保证每次切换时，复用元素都将被重新渲染；
v-show
- 表达式返回
truthy值时渲染； - 不支持
v-else； - 不支持在
<template>元素中使用；
区别
-
v-if是动态的向 DOM 树内添加或者删除 DOM 元素；v-show是通过设置 DOM 元素的 display 样式属性控制显隐；v-if是“真正”的条件渲染，因为v-if之中的模板也可能包括数据绑定或子组件，它在编译过程有一个局部编译/卸载的过程，会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，
v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 display样式 进行切换。 -
v-if支持在<template>元素中使用；v-show不支持在<template>元素中使用；v-if切换会导致整个false条件内容被卸载，不管v-if绑定在什么元素上，渲染结果不会出现false条件的内容。v-show的切换是通过js代码去修改元素的element style，如果value为false，设置display: none; 如果value为true，设置display: ''；所以必须有真实存在的DOM结构才可以，而页面渲染出真正的DOM元素后不会存在<template>标签。tips： 使用
v-show的话，如果需要在渲染开始的提前设置显隐值，尽量在直接在元素标签的style里面设置display的值，不要在css文件中，不然可能会被覆盖。 -
一般来说，
v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用
v-show较好；如果在运行时条件很少改变，则使用v-if较好。
