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

Question

 //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"; })

This is my vanilla Js code, I am trying to convert this into vue js code, however when I input this code I get an error. How can I convert my vanilla js code to 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>

Answer 1

You add click events in template section of your vue file, not in script(js) section. It usually looks like this:

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

and then in your methods you have:

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

and there is many ways to add styles, one of them is to bind class:

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

and you have someBool variable in data:

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

You can read more at official docs: https://v2.vuejs.org/v2/guide/events.html and https://v2.vuejs.org/v2/guide/class-and-style.html

Answer 2

您需要根据要发生的操作绑定类： Vue 绑定类和样式您绑定的类需要由data()定义，然后将事件添加到 html 元素以切换这些类或以任何方式操作