【问题标题】:Vue.js - how toggle icon class on clickVue.js - 如何在点击时切换图标类
【发布时间】:2018-08-09 02:02:33
【问题描述】:

这是我的代码的 sn-p,其中在页面加载时我的 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>

【问题讨论】:

    标签: javascript jquery html vue.js


    【解决方案1】:

    使用:class binding:

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

    【讨论】:

      猜你喜欢
      • 2017-10-01
      • 2016-11-22
      • 2014-06-09
      • 2017-12-11
      • 1970-01-01
      • 2019-08-06
      • 1970-01-01
      • 2016-11-27
      相关资源
      最近更新 更多