【问题标题】：Converting Jquery hide/show to Vue将 Jquery 隐藏/显示转换为 Vue
【发布时间】：2018-08-16 06:35:36
【问题描述】：

我制作了一些希望与 Vue 一起使用的隐藏/显示面板。面板是用 Jquery 编写的——但是当我在 Vue 中安装 Jquery 函数时，整个事情似乎都失败了。面板不/隐藏/显示。

有人知道为什么吗？我听说 Jquery 和 Vue 存在问题，但我还没有找到解决这个问题的解决方案。我是否需要将 Jquery 转换为 Vue（我什至不知道该怎么做）。谁能建议我如何解决这个问题？

在这里提琴：https://jsfiddle.net/syed263/m4s9Lyed/111/

HTML

<!DOCTYPE html>
<html>

  <head>
    <link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" rel="stylesheet">
    <title></title>
  </head>

  <body>
    <div class="container">

      <!--COMPONENT START-->
      <div>
        <div>
          <div id='panel0'>
            <div class="panel_head">
              TITLE
            </div>
            <div class="panel_body">
              BODY
            </div>
          </div>
        </div>
        <div>
          <span class="btn" id='click' value="Show/Hide"><span id="eee"><i class="far fa-window-maximize"></i></span></span>
        </div>
      </div>
      <!--COMPONENT END-->


      <!--COMPONENT START-->
      <div>
        <div>
          <div id='panel2'>
            <div class="panel_head">
              TITLE
            </div>
            <div class="panel_body">
              BODY
            </div>
          </div>
        </div>
        <div>
          <span class="btn" id='click2' value="Show/Hide"><span id="eee"><i class="far fa-window-maximize"></i></span></span>
        </div>
      </div>
      <!--COMPONENT END-->

      <!--COMPONENT START-->
      <div>
        <div>
          <div id='panel3'>
            <div class="panel_head">
              TITLE
            </div>
            <div class="panel_body">
              BODY
            </div>
          </div>
        </div>
        <div>
          <span class="btn" id='click3' value="Show/Hide"><span id="eee"><i class="far fa-window-maximize"></i></span></span>
        </div>
      </div>
      <!--COMPONENT END-->
    </div>
  </body>

</html>

JavaScript

$('#click').click(function() {
  $("#panel0").toggle("slide");
});

$('#click2').click(function() {
  $("#panel2").toggle("slide");
});

$('#click3').click(function() {
  $("#panel3").toggle("slide");
});


(function() {
  $("#panel0").toggle("slide");
  $("#panel2").toggle("slide");
  $("#panel3").toggle("slide");

}());

【问题讨论】：

什么不完全有效？小提琴作品
将此添加到已挂载的 Vue 中，作为方法停止所有 Vue 实例的工作。基本上，页面无法呈现。
你能在分叉的 jsfiddle 中做到这一点吗？支持vue
如果这是您所期望的，那么它是可能的：jsfiddle.net/thxopcf4

标签： javascript jquery vue.js

【解决方案1】：

您的问题实际上更像是两个；通过在 Vue 中使用 jQuery 来做到这一点，或者在纯 Vue 中做到这一点。显然，将其转换为纯 Vue 会更好，特别是如果您只使用 toggle() 方法，因为仅为一个函数导入整个 jQuery 库是非常过分的。

使用 jQuery 版本：

要在 Vue 中使用 jQuery，您需要包装一个 Vue 组件并将 v-once 指令放在该组件上，以便 Vue 不理会它。然后，您通常会使用 window.jQuery.('#someid').toggle()

来定位元素

我将面板组件提炼为可重用，并在面板组件本身内使用以下方法定位它。

methods:{
    toggleMe(id){
        window.jQuery('#'+id).toggle('slide');
    }
}

这是完整的工作小提琴https://jsfiddle.net/skribe/cmwtqe7d/3/

没有 jQuery 版本

复制 jQuery 的 toggle() 方法非常容易，因为它只是添加/删除“display:none” 您可以使用 Vue 的类绑定来执行此操作。在这种情况下甚至不需要任何功能。只需创建一个hidePanel 数据属性，编写一个.hideme css 类，将其绑定到模板中的 div，然后通过@click 事件使用hidePanel = !hidePanel 切换它。

 <div :id='panel.pId' :class="{hideme : hidePanel}">
  <div class="panel_head"> TITLE </div>
  <div class="panel_body"> BODY </div>
</div>
<div>
  <span @click="hidePanel = !hidePanel" class="btn">
    <span id="eee"><i class="far fa-window-maximize"></i></span>
  </span>
</div>

这是工作的 Jfiddle： https://jsfiddle.net/skribe/L9mq20nd/14/

【讨论】：