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

Question

这是我的代码片段，其中在页面加载时我的div被折叠，图标初始类被设置为＆＃39; fa fa-chevron-up＆＃39;。如何将图标的课程切换为＆＃39; fa-chevron-down＆＃39;什么时候点击？

＆＃13;

＆＃13;

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

＆＃13;

.is-collapsed{
  display: none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用:class binding：

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