条件渲染 v-if v-else
<h1 v-if="ok">Yes</h1>
//当ok为真的时候渲染标签
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
//同条件语句if else
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
在<template>上使用v-if
- 在vue中所有的指令都必须添加在一个标签当中，如果在需要条件渲染多个标签，又不想在外层在包裹一个标签的化可使用
<template>
如下
//最终渲染的结果不会包含template 标签
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
v-else-if
- 可连续使用的渲语句
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
使用key管理可复用的元素
- 在循环元素和条件渲染 相同的元素,元素的属性不同，在这种情况下Vue会复用相同的元素不会再次生成DOM。要解决这种情况要给元素绑定一个唯一的key属性，以区同样DOM结构的元素
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
在上面的代码中如果不加唯一的key值 在元素切换的时候只会给变input当中的placeholder 当天添加了key值之后 相同的元素不会复用，会重新渲染DOM节点
v-show 同dispaly:none block
- 与v -if 的区别在于
1。v-show的元素会一直存在与页面中只是显示隐藏的区别
2。v-if 是直接删除和再次创建元素
3。使用场景，当需要频繁的切换元素的时候使用v-show 当不是频繁的切换元素的时候使用v-if
注意:v-show不支持template元素且不支持v-else
