Vue.js 条件语句

在 Vue.js 中，我们可以使用条件语句来根据不同的条件来显示不同的内容。这在开发过程中非常常见，因为我们经常需要根据不同的情况来展示不同的内容。

v-if 指令

Vue.js 提供了 v-if 指令来实现条件渲染。它根据表达式的值的真假来移除或插入元素。

<div v-if="isLoggedin">
  <p>Welcome back!</p>
</div>

在上面的例子中，只有当 isLoggedin 为真的时候，<p>Welcome back!</p> 才会被渲染出来。

v-else 指令

除了 v-if，Vue.js 也提供了 v-else 指令来实现条件渲染的另一个选项。

<div v-if="isLoggedin">
  <p>Welcome back!</p>
</div>
<div v-else>
  <p>Please log in.</p>
</div>

如果 isLoggedin 为真，则显示 Welcome back!，否则显示 Please log in.。

v-else-if 指令

有时候我们可能需要多个条件进行判断，这时候可以使用 v-else-if 指令。

// www.javascriptcn.com code example
<div v-if="isVIP">
  <p>Welcome VIP member!</p>
</div>
<div v-else-if="isLoggedin">
  <p>Welcome back!</p>
</div>
<div v-else>
  <p>Please log in.</p>
</div>

在上面的例子中，如果 isVIP 为真，则显示 Welcome VIP member!；如果 isLoggedin 为真，则显示 Welcome back!；否则显示 Please log in.。

v-show 指令

除了 v-if，Vue.js 还提供了 v-show 指令用来根据表达式的真假来显示或隐藏元素。不同的是，使用 v-show 时，元素始终会被渲染，只是通过 CSS 来控制显示与隐藏。

<div v-show="isVisible">
  <p>Hello, Vue.js!</p>
</div>

在上面的例子中，如果 isVisible 为真，则显示 Hello, Vue.js!；如果为假，则隐藏元素，但元素仍然会被渲染出来。

以上就是 Vue.js 条件语句的用法，通过合理的运用条件语句，我们可以根据不同的情况来动态地展示不同的内容。