我如何将 vanilla Js 代码转换为 vue js 代码答案

【问题标题】：How do i convert vanilla Js code into vue js code我如何将 vanilla Js 代码转换为 vue js 代码
【发布时间】：2020-07-12 09:10:36
【问题描述】：

//Logged out Events
document.getElementById("login-help").addEventListener("click", function(){
    document.querySelector(".forgotten").style.display = "flex";
    document.querySelector(".login").style.display = "none";
    document.querySelector(".signup").style.display = "none";
})

document.getElementById("forgotten-back").addEventListener("click", function(){
    document.querySelector(".forgotten").style.display = "none";
    document.querySelector(".login").style.display = "flex";
    document.querySelector(".signup").style.display = "none";
})

document.getElementById("signup-btn").addEventListener("click", function(){
    document.querySelector(".forgotten").style.display = "none";
    document.querySelector(".login").style.display = "none";
    document.querySelector(".signup").style.display = "flex";
})

document.getElementById("signup-back").addEventListener("click", function(){
    document.querySelector(".forgotten").style.display = "none";
    document.querySelector(".login").style.display = "flex";
    document.querySelector(".signup").style.display = "none";
})

这是我的 vanilla Js 代码，我正在尝试将其转换为 vue js 代码，但是当我输入此代码时出现错误。如何将我的 vanilla js 代码转换为 vue js？

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "Home",
  methods: {
    //Logged out Events
document.getElementById("login-help").addEventListener("click", function(){
    document.querySelector(".forgotten").style.display = "flex";
    document.querySelector(".login").style.display = "none";
    document.querySelector(".signup").style.display = "none";
})

document.getElementById("forgotten-back").addEventListener("click", function(){
    document.querySelector(".forgotten").style.display = "none";
    document.querySelector(".login").style.display = "flex";
    document.querySelector(".signup").style.display = "none";
})

document.getElementById("signup-btn").addEventListener("click", function(){
    document.querySelector(".forgotten").style.display = "none";
    document.querySelector(".login").style.display = "none";
    document.querySelector(".signup").style.display = "flex";
})

document.getElementById("signup-back").addEventListener("click", function(){
    document.querySelector(".forgotten").style.display = "none";
    document.querySelector(".login").style.display = "flex";
    document.querySelector(".signup").style.display = "none";
})
  },
  components: {
    HelloWorld
  }
};
</script>

【问题讨论】：

无法“自动”将 Vanilla JS 转换为 Vue。这需要重写您当前的应用程序。请阅读 Vue 的工作原理。

标签： javascript vue.js

【解决方案1】：

您在 vue 文件的模板部分添加点击事件，而不是在脚本（js）部分。它通常看起来像这样：

 <button @click="yourFunction">Click me</button>

然后在你的方法中你有：

 methods: {
   yourFunction() {
     this.addClass = true;
   },
  }

添加样式的方法有很多种，其中一种就是绑定类：

 <button :class="{'hidden': addClass}"

你在数据中有一些布尔变量：

  data() {
    return {
     addClass: false,
    };
  }

您可以在官方文档中阅读更多内容：https://vuejs.org/v2/guide/events.html 和 https://vuejs.org/v2/guide/class-and-style.html

【讨论】：

【解决方案2】：

您需要根据要发生的操作绑定类： Vue binding classes and styles 您绑定的类需要由 data() 定义，然后将 add events 定义为 html 元素以切换这些类或以任何方式操作

【讨论】：