vue 控制组件是否显示

在Vue中,控制组件的显示通常使用v-ifv-else-ifv-elsev-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的渲染。

相关推荐
灵感__idea6 小时前
Hello 算法:让前端人真正理解算法
前端·javascript·算法
向葭奔赴♡7 小时前
CSS是什么?—— 网页的“化妆师”
前端·css
黑犬mo7 小时前
在Edge、Chrome浏览器上安装uBlock Origin插件
前端·edge
excel7 小时前
🧩 Vue 3 watch 源码详解(含完整注释)
前端·javascript·vue.js
大前端helloworld7 小时前
前端梳理体系从常问问题去完善-网络篇
前端·面试
excel7 小时前
🌿 一文看懂 Vue 3 的 watch 源码:从原理到流程
前端
繁依Fanyi8 小时前
让工具说话:我在 Inspira Board 里用 AI 把“能用、好用、可复用”落成了日常
前端
weixin_456904279 小时前
C# 中的回调函数
java·前端·c#
kura_tsuki9 小时前
[Web网页] LAMP 架构与环境搭建
前端·架构
yinuo9 小时前
UniApp+Vue3多分包引入同一 npm 库被重复打包至 vendor 的问题分析与解决
前端