vue.js - 在 Vue.js 组件中使用纯 JS
问题描述
所以,我想创建一个导航栏,而不是重新发明轮子,我正在使用一些公共代码来加速我的 MVP 开发。
本质上,我正在使用这个导航条码 - https://codepen.io/PaulVanO/pen/GgGeyE。
但我不确定如何在我的 Vue 代码中实现 jquery 部分(我已经制作了一个组件,复制了 html 和 css,现在只需要在其中集成 jquery 功能。)
这是我需要集成的 Jquery 代码。
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
});
如果有人能帮助我完成这件事,那将非常感激。
解决方案
假设您将标记(html 和 css)作为一个组件的一部分,获得添加/删除类的切换功能将非常简单,您只需要一个切换活动状态的方法和一个数据属性来保留数据。举个例子会更好,所以就这样吧。
在您的组件对象中:
{
data() {
return {
isActive: false
}
},
methods: {
toggleMenu(){
this.isActive = !this.isActive
}
}
}
在您的标记中,您需要这个
<div class="button_container" id="toggle" :class="{'active': isActive}" @click="toggleMenu">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
------------------------------------
<div class="overlay" id="overlay" :class="{'open': isActive}">
<nav class="overlay-menu">
<ul>
<li ><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
这应该会让你继续前进,请注意我使用了v-on和v-bind的简写形式
推荐阅读
- reactjs - 我部署的站点看起来与本地版本不同
- flutter - 如何在颤动中使用 navigatorKey 传递值下一个屏幕?
- node.js - 使用附加调试 Typescript Node 应用程序
- javascript - 将 Array 中的字符串转换为数字,然后将它们全部相加以获得 JavaScript 中的总数
- python - 使用大图像集配置具有多个输入的 CNN
- android - 如何在使用 cmake 的 android 项目中使用 gmock 和 gtest
- javascript - 当主要提取的结果是循环中的特定值时,如何使用 JavaScript 等待次要提取的结果?
- javascript - 用户成功登录后如何将登录页面重定向到主页?
- java - 自从我将 Intellij IDEA Ultimate 从 2020.3 升级到 2021.1 后,为什么我的 Controller 中有很多错误消息?
- python - 使用 theads 多次调用函数