学前端的小王同学 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日

悬赏问题

  • ¥20 wireshark抓不到vlan
  • ¥20 关于#stm32#的问题:需要指导自动酸碱滴定仪的原理图程序代码及仿真
  • ¥20 设计一款异域新娘的视频相亲软件需要哪些技术支持
  • ¥15 stata安慰剂检验作图但是真实值不出现在图上
  • ¥15 c程序不知道为什么得不到结果
  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法
  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位,为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后,界面没有,cadence 启动不起来