当前位置：首页 > VUE

vue动态实现条件渲染

2026-02-22 14:33:19VUE

使用 `v-if` 和 `v-else` 指令

在 Vue 中，v-if 和 v-else 是最常用的条件渲染指令。v-if 根据表达式的真假值决定是否渲染元素，v-else 则作为 v-if 的备用分支。

<template>
  <div>
    <p v-if="isVisible">这段内容会根据条件显示</p>
    <p v-else>当条件不满足时显示这段内容</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    }
  }
}
</script>

使用 `v-show` 指令

v-show 与 v-if 类似，但不会移除 DOM 元素，而是通过 CSS 的 display 属性控制显示和隐藏。适合频繁切换的场景。

<template>
  <div>
    <p v-show="isVisible">这段内容会根据条件显示或隐藏</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    }
  }
}
</script>

使用计算属性动态控制渲染

计算属性可以根据依赖的数据动态生成条件值，适合逻辑复杂的条件判断。

<template>
  <div>
    <p v-if="shouldShow">这段内容通过计算属性控制显示</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 5
    }
  },
  computed: {
    shouldShow() {
      return this.count > 0
    }
  }
}
</script>

动态绑定条件表达式

可以在模板中直接绑定动态的条件表达式，适合需要根据运行时数据决定渲染内容的场景。

<template>
  <div>
    <p v-if="dynamicCondition">这段内容根据动态条件显示</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicCondition: Math.random() > 0.5
    }
  }
}
</script>

使用 `<template>` 标签分组渲染

<template> 标签可以作为不可见的包裹元素，用于分组多个元素的渲染条件。

<template>
  <div>
    <template v-if="isGroupVisible">
      <p>第一段内容</p>
      <p>第二段内容</p>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isGroupVisible: true
    }
  }
}
</script>

使用 `v-for` 和 `v-if` 结合

可以在列表渲染时结合条件渲染，但需要注意 v-for 和 v-if 的优先级问题（v-for 优先级更高）。

<template>
  <div>
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple', isActive: true },
        { id: 2, name: 'Banana', isActive: false }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.isActive)
    }
  }
}
</script>

使用动态组件 `<component>`

通过动态组件可以根据条件渲染不同的组件，适合需要切换不同视图的场景。

<template>
  <div>
    <component :is="currentComponent"></component>
    <button @click="toggleComponent">切换组件</button>
  </div>
</template>

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

export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  },
  components: {
    ComponentA,
    ComponentB
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' 
        ? 'ComponentB' 
        : 'ComponentA'
    }
  }
}
</script>

使用作用域插槽传递条件

父组件可以通过作用域插槽将条件传递给子组件，实现更灵活的渲染控制。

vue动态实现条件渲染

<!-- ParentComponent.vue -->
<template>
  <ChildComponent v-slot="{ condition }">
    <p v-if="condition">这段内容通过插槽条件渲染</p>
  </ChildComponent>
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot :condition="isConditionMet"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isConditionMet: true
    }
  }
}
</script>