使用v-show做条件渲染,代码里显示的是display=none,适用于切换频率高的
<div v-show="n===1">1</div>
<div v-show="n===1">2</div>
<div v-show="n===3">3</div>
结果:当n等于1时,显示1 2。
按顺序向下执行,每一条都会去看看是否符合条件
使用v-if做条件渲染,代码里直接删除掉了整个结构,适用于切换频率低的
<div v-if="n===1">1</div>
<div v-if="n===1">2</div>
<div v-if="n===3">3</div>
结果:当n等于1时,显示1 2。
按顺序向下执行,每一条都会去看看是否符合条件
使用v-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>
结果:当n等于1时,显示1。
按顺序向下执行,当有符合条件的n出现,则不再向下执行
使用v-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>5</div>
结果:当n不等于1/3时,显示5。
不需要添加条件,当没有符合条件的n出现时,就执行该语句。当使用v-else、v-else-if、v-if一起使用时,必须放在一起,中间不允许打断。
template配合v-if使用(不能和v-show一起使用),做到在不改变结构的前提下,避免重复工作
例:当n=1的时候,要将三个h2同时显示
//复杂方法
<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>
运行后代码: