vue 控制组件是否显示

曈欣2024-09-10 6:01

在Vue中，控制组件的显示通常使用v-if、v-else-if、v-else或v-show指令。

1.v-if：条件性地渲染元素，如果条件为假，元素甚至不会被渲染到DOM中。

html 复制代码

<template>
  <div>
    <MyComponent v-if="showMyComponent" />
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      showMyComponent: true
    };
  }
};
</script>

2.v-show：通过改变CSS的display属性来控制元素的显示和隐藏。

html 复制代码

<template>
  <div>
    <MyComponent v-show="showMyComponent" />
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      showMyComponent: true
    };
  }
};
</script>

3.v-if与v-show的区别：v-if是真正的条件渲染，因为它会确保条件块内的事件监听器和子组件会适当地被销毁和重建；v-show则简单地通过CSS切换元素的可见性。

4.v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。选择哪个取决于你的场景。

以上代码展示了如何在Vue组件中使用v-if来控制另一个组件MyComponent的显示。通过改变showMyComponent的值，你可以动态地控制MyComponent的渲染。