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>

- rory-h

Answer 1

请使用:class绑定，如下所示：Array-Syntax。

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

- Bhojendra Rauniyar