vue--条件渲染

条件渲染

两种：

1. v-if

• 单路分支

<p v-if = " f ">
true
</p>

• 双路分支

<p v-if = " f ">
true
</p>
<p v-else>
false
</p>

• 多路分支

<p v-if = " text === 'A'"> A </p>
<p v-else-if = " text === 'B'"> B </p>
<p v-else> C </p>

2. v-show

<p v-show = " f ">
if条件
</p>

v-if vs v-show

1. v-if 操作的是DOM存在与否, v-show操作的DOM的display样式属性
2. 性能

• 如果条件为假，v-show有较高的初始渲染开销
• v-if 有更高的切换开销
  项目中建议：
  如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。