当前位置：首页 > VUE

vue v if 实现切换

2026-01-23 03:56:17VUE

使用 `v-if` 实现切换

v-if 是 Vue.js 中用于条件渲染的指令，可以根据表达式的真假动态切换元素的显示与隐藏。以下是几种常见的实现方式：

基本用法

<template>
  <div>
    <button @click="toggle">切换显示</button>
    <div v-if="isVisible">内容区域</div>
  </div>
</template>

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

多条件切换

vue v if 实现切换

<template>
  <div>
    <button @click="showA">显示A</button>
    <button @click="showB">显示B</button>
    <div v-if="activeTab === 'A'">A内容</div>
    <div v-else-if="activeTab === 'B'">B内容</div>
    <div v-else>默认内容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'A'
    }
  },
  methods: {
    showA() {
      this.activeTab = 'A';
    },
    showB() {
      this.activeTab = 'B';
    }
  }
}
</script>

与 v-show 的区别

v-if 是真正的条件渲染，元素会被销毁和重建
v-show 只是切换 CSS 的 display 属性
v-if 适用于运行时条件很少改变的场景
v-show 适用于频繁切换的场景

性能考虑 当需要频繁切换时，v-show 性能更好，因为不会触发组件的销毁和重建生命周期。对于初始渲染条件为假且很少改变的情况，v-if 更合适。

vue v if 实现切换

动态组件切换

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">组件A</button>
    <button @click="currentComponent = 'ComponentB'">组件B</button>
    <component :is="currentComponent" v-if="currentComponent" />
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  components: { ComponentA, ComponentB },
  data() {
    return {
      currentComponent: null
    }
  }
}
</script>

注意事项