v-if 和 v-show:两种 Vue 条件渲染比较分析

v-if 和 v-show:两种 Vue 条件渲染比较分析
喜欢就关注我们吧


Vue中,有两种方法可以有条件地渲染部分应用程序:v-ifv-show

你可能会问,“为什么我们需要两种方法?”

问得好,这也是我在学习Vue时遇到的一个问题。我的答案是,尽管这些指令有着相似的最终结果,但它们有条件地显示内容的方式是不同的。

在本教程中,我们将了解什么是条件渲染、v-ifv-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应用程序,可以在浏览器中看到类似这样的内容。

v-if 和 v-show:两种 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:两种 Vue 条件渲染比较分析

回到代码,现在将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-ifv-show的工作方式不同。

那么,v-if和v-show有什么区别?

关键区别在于v-if有条件地渲染元素,而v-show有条件地显示元素。

这意味着当条件切换时,v-if实际上将销毁并重新创建元素。而v-show则始终保留元素在DOM中,并且只会通过更改CSS来切换显示。

我们可以通过为v-ifv-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 {
        activefalse,
      };
    },
  };
</script>

当显示元素时,DOM看起来像这样。

v-if 和 v-show:两种 Vue 条件渲染比较分析

当我们按下按钮时,DOM看起来像这样。

v-if 和 v-show:两种 Vue 条件渲染比较分析

如你所见,使用v-if的话,条件块完全从DOM中删除。但是使用v-show,其display设置为none

瞧!这就是v-ifv-show之间的区别。

什么时候使用?

一般情况下,考虑性能,v-if具有更高的切换成本,而v-show具有更高的初始渲染成本。

所以,如果你需要频繁切换某些内容,建议使用v-show

如果条件在运行时变化不那么频繁,建议使用v-if

另一件要考虑的事情是,v-if允许我们结合使用其他逻辑块。具体地说就是,我们可以使用v-elsev-else-if块在app中真正构建高级逻辑。

使用v-elsev-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-ifv-show指令工作方式之间的区别。

感谢阅读!

v-if 和 v-show:两种 Vue 条件渲染比较分析

每日分享前端插件干货,欢迎关注!

点赞和在看就是最大的支持❤️

原文始发于微信公众号(前端新世界):v-if 和 v-show:两种 Vue 条件渲染比较分析

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/29117.html

(0)
小半的头像小半

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!