当前位置：首页 > VUE

vue实现选择展示

2026-01-18 11:49:27VUE

Vue 实现选择展示功能

在 Vue 中实现选择展示功能可以通过多种方式完成，例如使用 v-if、v-show、动态组件或条件渲染。以下是几种常见的方法：

使用 `v-if` 或 `v-show` 控制显示

v-if 和 v-show 可以根据条件动态显示或隐藏元素。v-if 会完全移除 DOM 元素，而 v-show 仅通过 CSS 的 display 属性控制。

<template>
  <div>
    <button @click="toggleShow">切换显示</button>
    <div v-if="isVisible">使用 v-if 控制的内容</div>
    <div v-show="isVisible">使用 v-show 控制的内容</div>
  </div>
</template>

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

动态组件切换

如果需要切换不同的组件展示，可以使用 Vue 的动态组件 <component :is="currentComponent">。

<template>
  <div>
    <button @click="switchComponent('ComponentA')">显示组件 A</button>
    <button @click="switchComponent('ComponentB')">显示组件 B</button>
    <component :is="currentComponent" />
  </div>
</template>

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

export default {
  components: {
    ComponentA,
    ComponentB,
  },
  data() {
    return {
      currentComponent: "ComponentA",
    };
  },
  methods: {
    switchComponent(componentName) {
      this.currentComponent = componentName;
    },
  },
};
</script>

使用 `v-for` 渲染列表选择

如果展示的内容是列表形式，可以通过 v-for 结合选择逻辑实现动态展示。

<template>
  <div>
    <select v-model="selectedItem">
      <option v-for="item in items" :key="item.id" :value="item">
        {{ item.name }}
      </option>
    </select>
    <div v-if="selectedItem">
      当前选择：{{ selectedItem.name }} - {{ selectedItem.description }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: "选项1", description: "描述1" },
        { id: 2, name: "选项2", description: "描述2" },
      ],
      selectedItem: null,
    };
  },
};
</script>

结合计算属性动态过滤数据

如果需要根据用户输入动态筛选展示内容，可以结合计算属性实现。

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索..." />
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: "",
      items: [
        { id: 1, name: "Apple" },
        { id: 2, name: "Banana" },
        { id: 3, name: "Orange" },
      ],
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter((item) =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    },
  },
};
</script>

使用 Vue Router 实现页面级选择展示

如果需要在不同的路由之间切换展示内容，可以结合 Vue Router 实现。

<template>
  <div>
    <router-link to="/page1">页面1</router-link>
    <router-link to="/page2">页面2</router-link>
    <router-view />
  </div>
</template>