Vue 按不同选择展示不同元素

在 Vue 开发中，实现根据不同选择展示不同元素是一个常见需求。这一功能能够极大提升用户体验，让页面根据用户操作动态呈现相应内容。

我们可以使用 Vue 的条件渲染指令 v-if 来达成这一目的。假设我们有一个简单的选择框，选项分别为“水果”“蔬菜”“肉类”。我们想要根据用户选择展示不同的列表。

在 HTML 模板部分，我们创建一个 select 元素用于用户选择，绑定一个名为 selectedCategory 的数据属性。代码如下：

<select v-model="selectedCategory">
  <option value="fruit">水果</option>
  <option value="vegetable">蔬菜</option>
  <option value="meat">肉类</option>
</select>

接着，使用 v-if 指令根据 selectedCategory 的值来展示不同元素。

<div v-if="selectedCategory === 'fruit'">
  <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
  </ul>
</div>
<div v-if="selectedCategory ==='vegetable'">
  <ul>
    <li>白菜</li>
    <li>萝卜</li>
    <li>西红柿</li>
  </ul>
</div>
<div v-if="selectedCategory ==='meat'">
  <ul>
    <li>牛肉</li>
    <li>猪肉</li>
    <li>羊肉</li>
  </ul>
</div>

在 Vue 实例中，我们需要定义 selectedCategory 数据属性：

export default {
  data() {
    return {
      selectedCategory: 'fruit'
    };
  }
};

除了 v-if，v-switch 和 v-case 指令组合也是实现此功能的有效方式。v-switch 指令基于一个表达式的值进行条件判断，而 v-case 指令定义每个条件分支。

<template>
  <div>
    <select v-model="selectedCategory">
      <option value="fruit">水果</option>
      <option value="vegetable">蔬菜</option>
      <option value="meat">肉类</option>
    </select>
    <div v-switch="selectedCategory">
      <div v-case="'fruit'">
        <ul>
          <li>苹果</li>
          <li>香蕉</li>
          <li>橙子</li>
        </ul>
      </div>
      <div v-case="'vegetable'">
        <ul>
          <li>白菜</li>
          <li>萝卜</li>
          <li>西红柿</li>
        </ul>
      </div>
      <div v-case="'meat'">
        <ul>
          <li>牛肉</li>
          <li>猪肉</li>
          <li>羊肉</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedCategory: 'fruit'
    };
  }
};
</script>

通过上述方法，在 Vue 应用中就能轻松实现按不同选择展示不同元素，为用户提供更个性化、交互性更强的界面体验。无论是简单的信息展示，还是复杂的业务逻辑处理，这种动态展示元素的方式都能发挥重要作用，帮助开发者打造出功能丰富且易用的 Web 应用。