参考文档简介 | Vue.js
用 v-show 的时候发现有些元素不能显示,然后去找了文档,发现在官方文档中就有说明——v-how 不支持在<template> 元素上使用。而当时我就是写了<template v-show="show === true">作了一个条件判断是否显示<template> 元素。接着就做了一些笔记。
v-if:指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。且必须依附于某个元素可以在<template> 元素上使用。可以使用 v-else / v-else-if 为 v-if 创建另一个条件。前者是创建“else区块”,后者是创建“else if区块”。一个 v-else 必须跟在一个 v-if 或 v-else-if 后面,否则将不会被识别。v-else-if 同理。v-else 和 v-else-if 不能单独出现。
// v-else / v-else-if 不可以单独出现
<div v-if="type === 'A'"> // type = A 时,显示 A
A
</div>
<div v-else-if="type === 'B'"> // type = B 时,显示 B
B
</div>
<div v-else-if="type === 'C'"> // type = C 时,显示 C
C
</div>
<div v-else> // type = D(或者其他任何不为 'A'/'B'/'C' 的值) 时,显示 Not A/B/C
Not A/B/C
</div>
// v-if 可以单独出现
// template 可以用 v-if
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
v-show:用来按条件显示一个元素的指令.不同之处在于 v-show 会在 DOM 渲染中保留该元素;v-show 仅切换了该元素上名为 dispaly 的 CSS 属性,不支持在 <template> 元素上使用,也不能和 v-else 搭配使用。
<h1 v-show="ok">Hello!</h1> // 当 ok 为 true 时,页面会显示 h1 格式的 Hello!
两者的区别:官方文档其实有写,我个人的理解就是,一个是“if”,一个是“show”。if 做判断,满足条件就继续,否则不渲染、不“执行”;show为显示,不管条件是否满足,在一开始就会加载好,当show为“真”的时候就显示出来让你看见。
如果有不对之处,还请指出