Vue.js - 如何在点击时切换图标类

Question

这是我的代码片段，其中在页面加载时我的 div 折叠并且图标初始类设置为“fa fa-chevron-up”。单击 a 时，如何将图标的类切换为“fa fa-chevron-down”？

var vue = new Vue({
	el: '#vue-systemActivity',
	data: {
    loading:false, 
    collapsed: true
  }
  
});

.is-collapsed{
  display: none;
}

<a v-on:click=" collapsed = !collapsed" class="collapse-link"> 
    <i class="fa fa-chevron-up"></i>
</a>

Answer 1

使用:class 绑定：

<i :class="[collapsed ? 'fa-chevron-up' : 'fa-chevron-down', 'fa']"