vue实现＜el-icon-arrow-up＞和＜el-icon-arrow-down＞点击后相互切换的功能

代码示例：

<template>
  <div>
    <el-button :icon="showDropdown ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" @click="handleButtonClick">
      <el-icon-arrow-up v-if="showDropdown"></el-icon-arrow-up>
      <el-icon-arrow-down v-else></el-icon-arrow-down>
    </el-button>
    <el-dropdown v-if="showDropdown">
      <!-- 在这里添加下拉菜单的选项 -->
    </el-dropdown>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDropdown: false,
    };
  },
  methods: {
    handleButtonClick() {
      this.showDropdown = !this.showDropdown; // 切换下拉菜单的显示/隐藏状态
    }
  },
};
</script>

在这个示例中，我们使用了<el-button>和<el-dropdown>组件来创建一个下拉菜单。点击下拉箭头图标时，会触发handleButtonClick方法，切换下拉菜单的显示/隐藏状态。根据下拉菜单的显示状态，我们通过绑定不同的图标来显示<el-icon-arrow-up>或<el-icon-arrow-down>。这样，点击下拉箭头图标时，就可以实现上下箭头的切换效果。