Loading... 在Vue中，有两种方法可以有条件地渲染部分应用程序：`v-if`和 `v-show`。 你可能会问，“为什么我们需要两种方法？” 问得好，这也是我在学习Vue时遇到的一个问题。我的答案是，尽管这些指令有着相似的最终结果，但它们有条件地显示内容的方式是不同的。 在本教程中，我们将了解什么是条件渲染、`v-if`和 `v-show`的工作原理以及何时使用它们。 好的，话不多说，直接进入主题吧。 ## <span style='color:#2ba6d4'>什么是条件渲染?</span> 条件渲染是控制是否渲染模板代码的能力。我们可以通过应用程序的当前状态来做到这一点。 来看一个例子。假设我们正在创建一个表单，并且希望如果密码少于6个字符，则显示无效输入的错误消息。 现在让我们在模板中创建一个带有输入的基本表单区域。脚本使用 `v-model`建模表单数据。 > 创建一个基本的表单页面: ``` <template> <div class="login-area"> <h2>登录青鸟技术栈</h2> <p><input type="text" placeholder="请输入用户名" v-model="email" class="user-inp" /></p> <p><input type="password" placeholder="请输入密码" v-model="password" class="user-inp" /></p> <p><input type="button" value="立即登录" class="login-btn"></p> </div> </template> <script> export default { data() { return { email: "", password: "", } }, } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; color: #2c3e50; } /* 登录区域 */ .login-area { text-align: center; width: 320px; margin: 120px auto 0; } /* 输入框 */ .user-inp { width: 320px; line-height: 24px; box-sizing: border-box; } /* 登录按钮 */ .login-btn { border-radius: 5px; border: none; color: #fff; width: 100px; height: 36px; line-height: 36px; background-image: linear-gradient(45deg, #0081ff, #1cbbb4); cursor: pointer; vertical-align: middle; display: block; margin: 10px 0; float: right; } </style> ``` > 接着，让我们在密码字段下添加一个带有 `error-message`类的 `<p>`元素。 ``` <template> <div class="login-area"> <h2>登录青鸟技术栈</h2> <p><input type="text" placeholder="请输入用户名" v-model="email" class="user-inp" /></p> <p><input type="password" placeholder="请输入密码" v-model="password" class="user-inp" /></p> <!-- 新加代码行 --> <p class="error-message"> 登录密码少于6需要个字符！ </p> <p><input type="button" value="立即登录" class="login-btn"></p> </div> </template> <style> .error-message { background-color: rgba(248, 0, 10, 0.3); color: #fc2e09; border-radius: 5px; line-height: 26px; font-size: 14px; text-align: left; text-indent: 6px; } </style> ``` 好的，现在如果我们运行Vue应用程序，可以在浏览器中看到类似这样的内容。  现在我们可以在密码长度小于6个字符时使用条件渲染显示此错误消息。 还是这个例子，这次我们使用 `v-if`指令，因此在 `<p>`标签上，我们可以只用 `v-if`然后传入一个布尔语句。如果此语句为真，则渲染元素。如果为假，则不渲染。非常简单易懂。 > 使用 `v-if` ``` <p class="error-message" v-if="password.length < 6"> 登录密码少于6需要个字符！ </p> ``` 运行测试，OK！正确渲染了错误信息！  回到代码，现在将 `v-if`改为 `v-show`。 > 使用 `v-show` ``` <p class="error-message" v-show="password.length < 6"> 登录密码少于6需要个字符！ </p> ``` 运行页面后,我们看到的效果与 `v-if` 表现一致。 然而，`v-if`和 `v-show`的工作方式不同。 ## <span style='color:#2ba6d4'>那么，v-if和v-show有什么区别？</span> 关键区别在于 `v-if`有条件地渲染元素，而 `v-show`有条件地显示元素。 这意味着当条件切换时，`v-if`实际上将销毁并重新创建元素。而 `v-show`则始终保留元素在DOM中，并且只会通过更改CSS来切换显示。 我们可以通过为 `v-if`和 `v-show`运行检查元素来轻松查看这些区别。例如，假设有以下代码，其中包含两种类型的条件和一个切换条件的按钮。 > `v-if` 的页面渲染表现：  如你所见，使用 `v-if`的话，条件块完全从DOM中删除。 --- > `v-show` 的页面渲染表现:  使用 `v-show` 时,他只是修改了行内样式 `display:none`。 瞧！这就是 `v-if`和 `v-show`之间的区别。 ## <span style='0:color="#2ba6d4"\'>什么时候使用？</span> 一般情况下，考虑性能，`v-if`具有更高的切换成本，而 `v-show`具有更高的初始渲染成本。 所以，如果你需要频繁切换某些内容，建议使用 `v-show`。 如果条件在运行时变化不那么频繁，建议使用 `v-if`。 另一件要考虑的事情是，`v-if`允许我们结合使用其他逻辑块。具体地说就是，我们可以使用 `v-else`和 `v-else-if`块在app中真正构建高级逻辑。 使用 `v-else`和 `v-else-if` ``` <p v-if="判断条件/bool表达式">if表达式满足时</p> <p v-else-if="判断条件/bool表达式">else-if表达式满足时</p> <p v-else>条件均不满足时</p> ``` 明白了吗？这两种方法适用于不同的场合。100%取决于用例，所以一定要慎重考虑而不是随便选一个！！ 希望这篇简短的文章能帮助大家了解 `v-if`和 `v-show`指令工作方式之间的区别。 --- 今天的分享就结束了,这个也是在面试过程中经常会被问到的哦~ 最后修改：2021 年 12 月 19 日 © 允许规范转载 赞 都滑到这里了，不点赞再走！？
