Vue+ElementUI实现输入框日期框下拉框动态展示

在Vue中结合ElementUI实现输入框、日期框和下拉框的动态显示，可以通过v-if或v-show指令来控制元素的显示和隐藏。以下是一个简单的例子：

<template>
  <div>
    <!-- 输入框 -->
    <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
 
    <!-- 日期框 -->
    <el-date-picker
      v-if="showDatePicker"
      v-model="dateValue"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
 
    <!-- 下拉框 -->
    <el-select
      v-if="showSelect"
      v-model="selectValue"
      placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
 
    <!-- 控制按钮 -->
    <el-button @click="toggleDatePicker">切换日期框</el-button>
    <el-button @click="toggleSelect">切换下拉框</el-button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      inputValue: '',
      dateValue: '',
      selectValue: '',
      showDatePicker: false,
      showSelect: false,
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' }
      ]
    };
  },
  methods: {
    toggleDatePicker() {
      this.showDatePicker = !this.showDatePicker;
    },
    toggleSelect() {
      this.showSelect = !this.showSelect;
    }
  }
};
</script>

在这个例子中，我们定义了一个输入框、日期框和下拉框，以及用于切换它们显示与隐藏的按钮。通过点击按钮，我们的数据属性showDatePicker和showSelect将被切换，从而使对应的日期框和下拉框显示或隐藏。