Vue.js

外观

本页内容

条件渲染 ​

在Vue School上观看免费视频课程
在Vue School上观看免费视频课程

v-if ​

指令v-if用于条件性地渲染一个块。只有当指令的表达式返回一个真值时，该块才会被渲染。

template
<h1 v-if="awesome">Vue is awesome!</h1>

v-else ​

您可以使用v-else指令来指示v-if的“else块”

template
<button @click="awesome = !awesome">Toggle</button>

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

Vue很棒！

在沙箱中尝试

在沙箱中尝试

v-else元素必须立即跟在v-if或v-else-if元素之后——否则它将不会被识别。

v-else-if ​

正如其名所示，v-else-if充当了v-if的“else if块”。它也可以多次链式使用

template
<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>

与v-else类似，v-else-if元素也必须立即跟在v-if或v-else-if元素之后。

v-if在