动态控制 Element UI 的输入框组件具有清空按钮clearable

你可以通过设置 `clearable` 属性来动态控制 Element UI 的输入框组件是否具有清空按钮。当 `clearable` 属性设置为 `true` 时，输入框右侧会出现一个清空按钮，允许用户点击按钮来清空输入框的内容。如果 `clearable` 属性设置为 `false`，则不会显示清空按钮。

下面是一个示例代码，演示如何动态控制 Element UI 输入框组件的清空按钮：

<template>
  <el-input
    v-model="inputValue"
    :clearable="isClearable"
    placeholder="请输入内容"
  ></el-input>
  <el-button @click="toggleClearable">切换清空按钮</el-button>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      isClearable: true
    };
  },
  methods: {
    toggleClearable() {
      this.isClearable = !this.isClearable;
    }
  }
};
</script>

在上面的示例中，我们通过 `:clearable="isClearable"` 将 `isClearable` 变量绑定到 `clearable` 属性上。当点击按钮时，会调用 `toggleClearable` 方法来切换 `isClearable` 的值，从而动态控制是否显示清空按钮。