Vue之el-select结合v-if动态控制template显示隐藏方式

Vue框架提供了一个非常方便的组件el-select，可作为下拉选择框使用。配合v-if指令能够轻松的实现VUE项目中模版的动态显示/隐藏

el-select组件简介

el-select是饿了么组件库中的下拉选择框组件，使用方便。

<el-select placeholder="请选择">
  <el-option label="男" value="male"></el-option>
  <el-option label="女" value="female"></el-option>
</el-select>

上面的代码定义了一个下拉选择框，占位符为“请选择”，用户可以选择“男”或“女”两种选项。可以看到，el-select的使用非常简洁，只需要在其内部使用el-option设置选项即可。

el-select配合v-if动态控制template显示/隐藏

v-if是Vue框架中非常强大的指令之一，用于根据表达式的值的真假条件地展示或销毁元素。

我们可以通过v-if和el-select结合的方式，来实现在选中某个选项后，根据选项的值的不同，展示或隐藏Template。

实现的思路如下：

1. 在Vue中，定义一个变量selected，用于保存用户选择的值。代码如下：

// 定义Vue组件
new Vue({
  el: "#app",
  data: {
    selected: ''
  }
});

1. 在页面中，定义el-select下拉选择框组件和template模版。其中，template中内容为我们需要控制的区块。

<div id="app">
  <el-select v-model="selected" placeholder="请选择">
    <el-option label="A" value="a"></el-option>
    <el-option label="B" value="b"></el-option>
  </el-select>

  <template v-if="selected === 'a'">
    <div>A was selected</div>
  </template>
  <template v-if="selected === 'b'">
    <div>B was selected</div>
  </template>
</div>

1. 在模板中使用v-if指令，并添加对selected变量的条件判断：

2. 如果选中的是A，则显示 "A was selected"

3. 如果选中的是B，则显示 "B was selected"

通过上面的3个步骤，我们就可以实现在选中某个选项后，根据选项的值的不同，展示或隐藏Template。下面是示例的完整代码：

示例1：

<div id="app">
  <el-select v-model="selected" placeholder="请选择">
    <el-option label="A" value="a"></el-option>
    <el-option label="B" value="b"></el-option>
  </el-select>

  <template v-if="selected === 'a'">
    <div>A was selected</div>
  </template>
  <template v-if="selected === 'b'">
    <div>B was selected</div>
  </template>
</div>

<script>
  // 定义Vue组件
  new Vue({
    el: "#app",
    data: {
      selected: ''
    }
  });
</script>

示例2：

<div id="app">
  <el-select v-model="selected" placeholder="请选择">
    <el-option label="Yes" value="y"></el-option>
    <el-option label="No" value="n"></el-option>
  </el-select>

  <template v-if="selected === 'y'">
    <div>You selected Yes</div>
  </template>
  <template v-if="selected === 'n'">
    <div>You selected No</div>
  </template>
</div>

<script>
  // 定义Vue组件
  new Vue({
    el: "#app",
    data: {
      selected: ''
    }
  });
</script>

在上述示例中，我们通过el-select、v-if和template，实现了动态显示和隐藏区块的功能。在select中选择某个选项后，对应的template就会被显示出来，其余的则会隐藏。