vue.js 速成课程(3)：条件渲染

有时我们只想根据某些条件显示内容。例如，根据用户类型（普通用户或管理员），我们将显示/隐藏按钮、菜单或页面的其他部分。

在 Vue 中，要使用条件，我们只需使用 v-if 指令：

<div v-if="isAdmin">This content is for user admin only</div>

如果属性 isAdmin 为 true，则将呈现 div，如果为 false，则不会呈现 div

当然，要使该示例正常工作，我们需要向 data() 方法添加 isAdmin 属性。

data() {
    return {
        message: 'Hello World Vue',
        number1: 500,
        number2: 250,
        isAdmin: true
    }
},

在这种情况下，我将 isAdmin 设置为 true，但在实际应用中，该值可能来自数据库或 API。但是，原理将保持不变。

我们可以将昨天课程中学到的内容与本课程结合起来，并根据单击按钮来显示/隐藏某个部分。

<div v-if="showTitle">Welcome to my app</div>
<button @click="showTitle = !showTitle">Toggle show title</button>

然后我们必须在 app.js 中添加一个默认值为 true 的 showTitle

data() {
    return {
        showTitle: true
    }
},

现在，每次我们单击按钮时，标题都会重复显示/隐藏。

如果 showTitle 为 false，则可以隐藏它，但也可以显示其他内容。

<div v-if="showTitle">Welcome to my app</div>
<div v-else>Sorry, no title</div>
<button @click="showTitle = !showTitle">Toggle show title</button>

v-else 指令逻辑与 javascript 中的常规 if-else 语句使用相同的逻辑。

请注意，如果 v-if 指令的计算结果为 false，则 div 将根本不会在 DOM 中呈现。当指令切换为 true 时，DOM将与 div 一起重新呈现。

有时，始终在 DOM 中呈现 div 但仅在浏览器中显示或隐藏 div 可能会更有效率或出于许多其他原因。如何做到这一点？使用 v-show 指令，

<div v-show="isAdmin">
    This content will always be render but not always show
</div>

v-show 指令的作用与 v-if 相同，但 div 将始终存在于 DOM 中。在运行时，它是否显示在浏览器中取决于它评估的值。

---

相关文章：

• vue js 速成课程(1)：第一步
• vue js 速成课程(2)：按钮点击
• vue js 速成课程(3)：条件渲染
• vue js 速成课程(4)：v-for 和 v-bind
• vue js 速成课程(5)：动态类和计算属性