Vue.js 中的 v-show 和 v-if 有什么区别-JavaScript中文网-JavaScript教程资源分享门户

在 Vue.js 中，我们经常会使用到 v-show 和 v-if 两个指令来控制元素的显示和隐藏。这两个指令的作用类似，但是在实际使用中，它们有一些区别。本文将深入探讨 v-show 和 v-if 的区别，并给出具体的示例代码。

v-show

v-show 指令用于控制元素的显示和隐藏。当绑定的表达式值为 true 时，元素会显示出来；当值为 false 时，元素会被隐藏。它的用法非常简单，只需要将 v-show 绑定到一个布尔值即可。示例代码如下：

<div v-show="isShow">这是一个元素</div>

在上面的代码中，isShow 是一个布尔值，当它为 true 时，元素会显示出来；当它为 false 时，元素会被隐藏。此时，元素并没有被从 DOM 树中移除，只是设置了 display: none 样式。

v-if

v-if 指令同样用于控制元素的显示和隐藏。当绑定的表达式值为 true 时，元素会被渲染出来；当值为 false 时，元素不会被渲染出来。示例代码如下：

<div v-if="isShow">这是一个元素</div>

在上面的代码中，isShow 是一个布尔值，当它为 true 时，元素会被渲染出来；当它为 false 时，元素不会被渲染出来。

区别

v-show 和 v-if 都能实现元素的显示和隐藏，但是它们的区别在于：

v-show 只是控制元素的显示和隐藏，元素并没有被从 DOM 树中移除，只是设置了 display: none 样式；而 v-if 可以将元素从 DOM 树中移除，减少页面的渲染压力。
v-show 在初始渲染时会立即应用样式，元素会被渲染出来，只是不显示而已；而 v-if 在初始渲染时不会被渲染出来，只有在条件满足时才会被渲染出来。
v-show 的切换开销比较小，因为只是修改了元素的 display 样式；而 v-if 的切换开销比较大，因为需要重新渲染元素。

综上所述，当需要频繁切换元素的显示和隐藏时，建议使用 v-show；当元素的显示和隐藏是根据复杂的条件计算得出的，或者需要动态添加或删除元素时，建议使用 v-if。

示例代码

下面给出一个使用 v-show 和 v-if 的示例代码，用于演示它们的区别。在这个示例中，我们有一个按钮，点击按钮会切换一个元素的显示和隐藏。代码如下：

// javascriptcn.com 代码示例
<template>
  <div>
    <button @click="toggle">切换元素</button>
    <div v-show="isShow">这是一个 v-show 元素</div>
    <div v-if="isShow">这是一个 v-if 元素</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
    };
  },
  methods: {
    toggle() {
      this.isShow = !this.isShow;
    },
  },
};
</script>

在上面的代码中，我们定义了一个 data 属性 isShow，它的初始值为 true。当点击按钮时，会调用 toggle 方法来切换 isShow 的值。这样，v-show 和 v-if 就会根据 isShow 的值来切换元素的显示和隐藏。

总结

v-show 和 v-if 都是用于控制元素的显示和隐藏的指令，它们的区别在于 v-show 只是控制元素的显示和隐藏，元素并没有被从 DOM 树中移除，而 v-if 可以将元素从 DOM 树中移除。在实际使用中，应根据具体情况选择使用哪个指令。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653b6ce67d4982a6eb5c48f8