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

Question

Here's a snippet of my code in which on page load my div is collapsed and the icon initial class is set to 'fa fa-chevron-up'. How do I toggle the icon's class to 'fa fa-chevron-down' when a is clicked?

 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

使用：类绑定：

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