使用 v-if、v-show、v-else 和 v-else-if 在 Vue 中进行条件渲染/显示

介绍

Vue.js 是一个简单的 Web 应用程序框架，用于创建动态 Web 界面和 单页应用程序 (SPA)。当我们创建这些应用程序时，我们通常希望 根据特定标准渲染某些内容 – 这就是条件渲染的本质。

条件渲染是指根据条件是否成立来渲染不同的用户界面 (UI) 标记的能力。此概念经常用于显示或隐藏组件（切换）、切换应用程序功能、处理身份验证和授权等上下文中。

在本文中，我们将了解在 Vue.js 中使用以下条件渲染的各种方法 v-if, v-else-if及 v-else 指令。我们还将看一些示例并强调它们之间的区别 v-if 和 v-show.

v-如果

v-if 指令用于 有条件地渲染块 意思是块 v-if 属性只会是 生产 如果指令的表达式返回 true 价值。如果表达式产生无效结果（例如， null, 0, 空字符串, false），该元素是 删除 来自 DOM。

让我们通过实际示例来说明这种行为：

<div v-if="login"> <p>This user has been logged in!... Welcome.</p>
</div> <script>
export default { data() { return { login: true, }; }
};
</script>

自 login 被设置为 true是， <div> 块包含 v-if 指令将被生成并显示。

v-如果 vs 视频秀

值得注意的是 v-show 在上面的示例中也可以工作，并且功能看似相同，但两者之间有区别。

v-if 有条件地渲染 一个元素，而 v-show 有条件地显示/显示 一个元素。

这意味着当条件切换时， v-if 实际上会删除和恢复组件 v-show 只是使它们不可见或可见。下面的动画演示了如何 v-if 实际上删除并重现代码块：

同时， v-show 将始终维护 DOM 中的元素，并且仅更改其 CSS 来切换其外观（通过设置其 display 至 none):

v-其他

v-else 指令是一个 v-if 指令允许您自定义 false 条件渲染中的值。如果不是 true，你可以使用 v-else 来定义应该发生什么。

例如，假设我们有一个密码输入，并且我们希望它产生一条错误消息， “密码强度低”，如果输入的长度小于6则显示 “强密码” 如果长度大于6。

这是一个条件渲染，带有处理错误情况的选项：

<form> <input type="password" v-model="password" placeholder="Enter your password" /> <p v-if="password.length > 6">Strong Password</p> <p v-else>Weak Password</p>
</form> <script>
export default { data() { return { password: "" }; }
};
</script>

让我们利用它来切换简单登录页面的内容，以便它根据用户是否登录来更改消息。我们将根据以下内容修改按钮措辞 userLoggedIn 状态还有：

<div id="app"> <div v-if="userLoggedIn"> <h2>Hello Welcome!</h2> <p>You have sucessfully logged in to your user account!</p> </div> <div v-else> <p>Please Log In to access your account!</p> </div> <button @click="userLoggedIn = !userLoggedIn"> <p v-if="!userLoggedIn">Login</p> <p v-else>LogOut</p> </button>
</div> <script>
export default { data() { return { userLoggedIn: false }; }
};
</script>

按钮的单击事件将切换 userLoggedIn 数据项，这将影响显示的数据，如下所示：

v-else-if

v-else-if extends a v-if 与 else...if 堵塞。这与 JavaScript 类似 else...if 块，因为它允许我们向现有的语句添加 if 语句 v-if。当有很多条件需要检查并且可以链接多次时使用此方法：

<form> <input type="password" v-model="password" placeholder="Enter your password" /> <p v-if="password.length < 4">Weak Password</p> <p v-else-if="password.length < 7">Fairly Strong Password</p> <p v-else>Strong Password</p>
</form> <script>
export default { data() { return { password: "" }; }
};
</script>

结论

在本文中，我们了解了如何有条件地渲染元素 v-if, v-else及 v-else-if。我们还解释了之间的区别 v-if 和 v-show.

• 硬币聪明。 欧洲最好的比特币和加密货币交易所。
• 柏拉图区块链。 Web3 元宇宙智能。 知识放大。 自由登入。
• 加密鹰。 山寨币雷达。 免费试用。
• 来源：https://stackabuse.com/conditional-rendering-in-vue-with-v-if-v-show-v-else-and-v-else-if/