学前端的小王同学 2022-06-05 11:14 采纳率: 100%
浏览 576
已结题

原生js如何转成vue项目

想要把一个csshtmljs的网站整合成vue组件,初步了解template里面放html,style里面放css,script里面放js代码,但是由于这是vue文件所以,script应该是需要遵循vue.js语法在,不知道下面这串代码怎么遵循vue语法。
附上相关js代码
js


    const buttons = document.querySelectorAll(".card-buttons button");
        const sections = document.querySelectorAll(".card-section");
        const card = document.querySelector(".card");

        const handleButtonClick = e => {
          const targetSection = e.target.getAttribute("data-section");
          const section = document.querySelector(targetSection);
          targetSection !== "#about" ?
          card.classList.add("is-active") :
          card.classList.remove("is-active");
          card.setAttribute("data-state", targetSection);
          sections.forEach(s => s.classList.remove("is-active"));
          buttons.forEach(b => b.classList.remove("is-active"));
          e.target.classList.add("is-active");
          section.classList.add("is-active");
        };

        buttons.forEach(btn => {
          btn.addEventListener("click", handleButtonClick);
        });
    }
  }
  • 写回答

2条回答 默认 最新

  • Heerey525 前端领域新星创作者 2022-06-05 16:28
    关注

    给.card-buttons button 元素绑定@click="handleButtonClick" 类名动态添加可以改成object https://cn.vuejs.org/v2/guide/class-and-style.html
    还是建议你多看下Vue文档,熟悉之后就知道怎么改了

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 6月14日
  • 已采纳回答 6月6日
  • 创建了问题 6月5日

悬赏问题

  • ¥15 一个服务器已经有一个系统了如果用usb再装一个系统,原来的系统会被覆盖掉吗
  • ¥15 使用esm_msa1_t12_100M_UR50S蛋白质语言模型进行零样本预测时,终端显示出了sequence handled的进度条,但是并不出结果就自动终止回到命令提示行了是怎么回事:
  • ¥15 前置放大电路与功率放大电路相连放大倍数出现问题
  • ¥30 关于<main>标签页面跳转的问题
  • ¥80 部署运行web自动化项目
  • ¥15 腾讯云如何建立同一个项目中物模型之间的联系
  • ¥30 VMware 云桌面水印如何添加
  • ¥15 用ns3仿真出5G核心网网元
  • ¥15 matlab答疑 关于海上风电的爬坡事件检测
  • ¥88 python部署量化回测异常问题