vue实现箭头切换

使用 Vue 实现箭头切换功能

方法一：通过 v-if 和 v-else 切换箭头方向

通过绑定一个布尔值控制箭头的显示方向，利用 v-if 和 v-else 切换不同方向的箭头图标。

<template>
  <div>
    <button @click="toggleArrow">
      <span v-if="isUp">↑</span>
      <span v-else>↓</span>
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isUp: false
    }
  },
  methods: {
    toggleArrow() {
      this.isUp = !this.isUp
    }
  }
}
</script>

方法二：使用动态 class 切换样式

通过动态绑定 class 来改变箭头的旋转方向，适合使用 CSS 变换实现箭头旋转的场景。

<template>
  <div>
    <button @click="toggleArrow">
      <span class="arrow" :class="{ 'rotate-180': isUp }">↑</span>
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isUp: false
    }
  },
  methods: {
    toggleArrow() {
      this.isUp = !this.isUp
    }
  }
}
</script>

<style>
.arrow {
  transition: transform 0.3s ease;
}
.arrow.rotate-180 {
  transform: rotate(180deg);
}
</style>

方法三：使用第三方图标库

结合 Font Awesome 或 Material Icons 等图标库，通过动态绑定图标名称实现切换。

<template>
  <div>
    <button @click="toggleArrow">
      <i :class="arrowIcon"></i>
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isUp: false
    }
  },
  computed: {
    arrowIcon() {
      return this.isUp ? 'fas fa-arrow-up' : 'fas fa-arrow-down'
    }
  },
  methods: {
    toggleArrow() {
      this.isUp = !this.isUp
    }
  }
}
</script>

方法四：使用 SVG 箭头

通过 SVG 实现更灵活的箭头样式，利用 Vue 的动态属性绑定控制箭头方向。

<template>
  <div>
    <button @click="toggleArrow">
      <svg width="24" height="24" viewBox="0 0 24 24">
        <path :d="arrowPath" fill="currentColor" />
      </svg>
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isUp: false
    }
  },
  computed: {
    arrowPath() {
      return this.isUp 
        ? 'M12 4l-8 8h16z' 
        : 'M12 20l-8-8h16z'
    }
  },
  methods: {
    toggleArrow() {
      this.isUp = !this.isUp
    }
  }
}
</script>

以上方法均可实现箭头切换功能，选择取决于项目需求和偏好。方法一适合简单字符箭头，方法二适合 CSS 动画效果，方法三适合使用图标库，方法四适合需要自定义 SVG 的场景。