Vue 点击图标切换样式：实现点击变另一个，再次点击变回来

要实现点击图标变成另一个，再次点击变回来的效果，可以使用 Vue 的条件渲染和事件绑定。

首先，在 Vue 实例的 data 中定义一个变量，用于控制图标的显示状态：

data() {
  return {
    'isIconClicked': false
  }
}

然后，在模板中使用条件渲染来根据 'isIconClicked' 的值显示不同的图标：

<template>
  <div>
    <i class='icon' :class="{'icon-clicked': isIconClicked}" @click="toggleIcon"></i>
  </div>
</template>

在上面的代码中，通过 :class 绑定了一个对象，当 'isIconClicked' 为 true 时，会添加一个名为 'icon-clicked' 的类，从而改变图标的样式。

最后，在 methods 中定义 'toggleIcon' 方法，用于切换 'isIconClicked' 的值：

methods: {
  toggleIcon() {
    this.isIconClicked = !this.isIconClicked;
  }
}

这样，当图标被点击时，'toggleIcon' 方法会被调用，从而切换 'isIconClicked' 的值，进而改变图标的样式。

可以根据具体需求修改图标的 class 名和图标样式。