el-input和el-select通過v-if切换

在Vue.js中，`el-input`和`el-select`是Element UI库中的输入框和下拉选择组件。如果你想通过条件渲染`v-if`指令来动态显示或隐藏这两个组件，你可以这样做：

例如，假设有一个变量`showInput`用于控制是否显示输入框，`selectedOption`用于存储下拉选项的选择状态：

<template>
  <div>
    <el-input v-if="showInput" placeholder="请输入内容"></el-input>
    <el-select v-if="!showInput">
      <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showInput: true, // 初始设置为true，展示输入框
      selectedOption: null,
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' }
        // ... 更多选项
      ]
    };
  },
  methods: {
    toggleInput() {
      this.showInput = !this.showInput;
    } // 当需要切换时可以调用这个方法
  }
};
</script>

在这个例子中，`v-if=“showInput”`会显示输入框，当`toggleInput()`方法被调用或`showInput`变化时，输入框会被隐藏并显示下拉选择器。相反，如果`showInput`为`false`，则只会显示下拉选择器。