v-if 结合 element plus的Segmented 判断 俩个div 显示 隐藏

`v-if` 是 Vue.js 中的一个指令，用于条件渲染元素。当你想根据某个布尔表达式的真假来决定是否显示某个 `<div>` 元素时，可以使用它。结合 Element Plus 的 Segmented 组件（分段开关），你可以这样做：

假设你有一个分段开关（`<el-segmented-button>`），它的值绑定到一个名为 `isActive` 的变量，你可以这样设置两个 `<div>`：

<template>
  <el-segmented-button v-model="isActive">
    <!-- 分段选项 -->
    <el-button tag="el-switch" v-if="isActive">显示</el-button>
    <el-button tag="el-switch" v-else>隐藏</el-button>
  </el-segmented-button>

  <div v-show="isActive">这是一个需要显示的 div</div>
  <div v-show="!isActive">这是另一个需要隐藏的 div</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false, // 初始状态，默认为不显示
    };
  },
};
</script>

在这个例子中，当 `isActive` 为 `true` 时，第一个 `<el-switch>` 和对应的 `显示` 文本会展示，并且 `v-show` 指令控制的第一个 `<div>` 会显示；反之，如果 `isActive` 为 `false`，则第二个 `<div>` 会被显示。