在 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 指令。
-- -------------------- ---- ------- ---- ------------- ---------- --- ----------- ------ ---- ----------------------- ---------- --------- ------ ---- ------- --------- --- ------- ------
在上面的例子中，如果 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 条件语句的用法，通过合理的运用条件语句，我们可以根据不同的情况来动态地展示不同的内容。