Vue——条件渲染

使用ｖ-show做条件渲染，代码里显示的是display＝none，适用于切换频率高的

	<div v-show="n===1">1</div>
	<div v-show="n===1">2</div>
	<div v-show="n===3">3</div>

结果：当ｎ等于１时，显示１　２。
按顺序向下执行，每一条都会去看看是否符合条件

使用ｖ-if做条件渲染，代码里直接删除掉了整个结构，适用于切换频率低的

	<div v-if="n===1">1</div>
	<div v-if="n===1">2</div>
	<div v-if="n===3">3</div>

结果：当ｎ等于１时，显示１　２。
按顺序向下执行，每一条都会去看看是否符合条件

使用ｖ-else-if做条件渲染，代码里直接删除掉了整个结构，适用于切换频率低的

	<div v-else-if="n===1">1</div>
	<div v-else-if="n===1">2</div>
	<div v-else-if="n===3">3</div>

结果：当ｎ等于１时，显示１。
按顺序向下执行，当有符合条件的ｎ出现，则不再向下执行

使用ｖ-else做条件渲染

	<div v-else-if="n===1">1</div>
	<div v-else-if="n===1">2</div>
	<div v-else-if="n===3">3</div>
	<div v-else>５</div>

结果：当ｎ不等于１／３时，显示５。
不需要添加条件，当没有符合条件的ｎ出现时，就执行该语句。当使用ｖ-else、ｖ-else-if、ｖ-if一起使用时，必须放在一起，中间不允许打断。

template配合v-if使用（不能和v-show一起使用），做到在不改变结构的前提下，避免重复工作

例：当ｎ=1的时候，要将三个ｈ2同时显示

//复杂方法
<h2 v-show="n===1">你好1</h2>
<h2 v-show="n===1">你好2</h2>
<h2 v-show="n===1">你好3</h2>

//简便方法
<template v-if="n===1">
	<h2>你好1</h2>
	<h2>你好2</h2>
	<h2>你好3</h2>
</template>

运行后代码：