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 binding：

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