使用jQuery版本：

Question

我做了一些希望与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");

}());

Answer 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，然后使用hidePanel = !hidePanel和一个@click事件对其进行切换即可。

 <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/

将JQuery隐藏/显示转换为Vue

1 个答案:

使用jQuery版本：

没有jQuery版本