需要改jQuery为vue展开折叠代码答案

【问题标题】：need to change jQuery to vue expand collapse code需要改jQuery为vue展开折叠代码
【发布时间】：2021-09-26 19:58:19
【问题描述】：

我是vue js的新手，需要将一些jquery代码更改为vue js。

$(document).ready(function(){
        // Add minus icon for collapse element which is open by default
        $(".collapse.show").each(function(){
            $(this).prev(".card-header").find(".fa").addClass("fa-minus").removeClass("fa-plus");
        });
        
        // Toggle plus minus icon on show hide of collapse element
        $(".collapse").on('show.bs.collapse', function(){
            $(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
        }).on('hide.bs.collapse', function(){
            $(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
        });
    });

任何人都可以帮助我或教我，我该如何解决这个问题。

【问题讨论】：

尝试分享一个可重现的例子。
你也可以显示 HTML 吗？似乎与 Vue.js 无关

标签： jquery vue.js

【解决方案1】：

您可以像这样覆盖 jQuery 函数。我用它来覆盖 slideToggle 以实现 QUnit 测试性能的简单显示/隐藏。

$.fn._slideToggle = $.fn.slideToggle;

$.fn.slideToggle = function(){
    // new code here
    if (this.css('display') === 'none') {
        // applies jQuery show() to this
        $.fn.show.apply(this);
    } else {
        // applies jQuery hide() to this
        $.fn.hide.apply(this);
    }
};

【讨论】：