vue.js 条件渲染实例

Vue.js的条件渲染允许你在模板中根据数据的状态显示或隐藏内容。这通常通过`v-if`或`v-show`指令实现。

1. **v-if**指令：当表达式的值为真时，元素会被渲染；如果为假，则会从DOM中移除。示例：

   <div v-if="isLoggedIn">
     Welcome, {{ user.name }}!
   </div>

如果`isLoggedIn`变量为`true`，则会展示用户名。

2. **v-show**指令：与`v-if`类似，但无论条件是否成立，元素都会被保留并添加到DOM中，只是CSS样式改变（display:none 或 display:block）。它更适合于实时切换，性能开销小一些。例如：

   <div v-show="isLoggedIn">
     Welcome, {{ user.name }}!
   </div>

这两个指令都支持三元运算符的简写形式：

<div :class="{ active: isLoggedIn }">...</div> <!-- 使用v-bind:class -->

这里`active`类仅在`isLoggedIn`为真时应用。