在Vue中，有两种方法可以有条件地渲染部分应用程序：v-if和v-show。
你可能会问，“为什么我们需要两种方法？”
问得好，这也是我在学习Vue时遇到的一个问题。我的答案是，尽管这些指令有着相似的最终结果，但它们有条件地显示内容的方式是不同的。
在本教程中，我们将了解什么是条件渲染、v-if和v-show的工作原理以及何时使用它们。
好的，话不多说，直接进入主题吧。
什么是条件渲染？
条件渲染是控制是否渲染模板代码的能力。我们可以通过应用程序的当前状态来做到这一点。
来看一个例子。假设我们正在创建一个表单，并且希望如果密码少于6个字符，则显示无效输入的错误消息。
现在让我们在模板中创建一个带有输入的基本表单区域。脚本使用v-model建模表单数据。
基本表单
<template>
<div>
<h2>Sign Up</h2>
{{ email }} {{ password }}
<p><input type="text" placeholder="Email" v-model="email" /></p>
<p><input type="password" placeholder="Password" v-model="password" /></p>
</div>
</template>
<script>
export default {
data() {
return {
email: "",
password: "",
};
},
};
</script>
接着，让我们在密码字段下添加一个带有error-message类的<p>元素。
<template>
<div>
<h2>Sign Up</h2>
{{ email }} {{ password }}
<p><input type="text" placeholder="Email" v-model="email" /></p>
<p><input type="password" placeholder="Password" v-model="password" /></p>
<p class="error-message">The password must be at least 6 characters</p>
</div>
</template>
好的，现在如果我们运行Vue应用程序，可以在浏览器中看到类似这样的内容。
现在我们可以在密码长度小于6个字符时使用条件渲染显示此错误消息。
还是这个例子，这次我们使用v-if指令，因此在<p>标签上，我们可以只用v-if然后传入一个布尔语句。如果此语句为真，则渲染元素。如果为假，则不渲染。非常简单易懂。
使用v-if
<p class="error-message" v-if="password.length < 6">
The password must be at least 6 characters
</p>
OK！正确渲染了错误信息！
回到代码，现在将v-if改为v-show，并且希望应用程序看起来完全相同。
使用v-show
<p class="error-message" v-show="password.length < 6">
The password must be at least 6 characters
</p>
然而，v-if和v-show的工作方式不同。
那么，v-if和v-show有什么区别？
关键区别在于v-if有条件地渲染元素，而v-show有条件地显示元素。
这意味着当条件切换时，v-if实际上将销毁并重新创建元素。而v-show则始终保留元素在DOM中，并且只会通过更改CSS来切换显示。
我们可以通过为v-if和v-show运行检查元素来轻松查看这些区别。例如，假设有以下代码，其中包含两种类型的条件和一个切换条件的按钮。
<template>
<div>
<p v-if="active">Using v-if</p>
<p v-show="active">Using v-show</p>
<button @click="active = !active">Toggle active</button>
</div>
</template>
<script>
export default {
data() {
return {
active: false,
};
},
};
</script>
当显示元素时，DOM看起来像这样。
当我们按下按钮时，DOM看起来像这样。
如你所见，使用v-if的话，条件块完全从DOM中删除。但是使用v-show，其display设置为none。
瞧！这就是v-if和v-show之间的区别。
什么时候使用？
一般情况下，考虑性能，v-if具有更高的切换成本，而v-show具有更高的初始渲染成本。
所以，如果你需要频繁切换某些内容，建议使用v-show。
如果条件在运行时变化不那么频繁，建议使用v-if。
另一件要考虑的事情是，v-if允许我们结合使用其他逻辑块。具体地说就是，我们可以使用v-else和v-else-if块在app中真正构建高级逻辑。
使用v-else和v-else-if
<p v-if="active">Using v-if</p>
<p v-else-if="true">Else if statement</p>
<p v-else>Else statement</p>
明白了吗？这两种方法适用于不同的场合。100%取决于用例，所以一定要慎重考虑而不是随便选一个！！
结束语
希望这篇简短的文章能帮助大家了解v-if和v-show指令工作方式之间的区别。
感谢阅读！
每日分享前端插件干货，欢迎关注！
点赞和在看就是最大的支持❤️
原文始发于微信公众号（前端新世界）：v-if 和 v-show：两种 Vue 条件渲染比较分析
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/41215.html
