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

这是我的原始Js代码，我试图将其转换为vue js代码，但是当我输入此代码时，出现错误。如何将我的原始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>

Answer 1

您可以在vue文件的模板部分而不是script（js）部分中添加点击事件。通常看起来像这样：

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

，然后在您的方法中拥有：

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

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

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

并且您的数据中包含someBool变量：

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

您可以在官方文档中找到更多信息：https://vuejs.org/v2/guide/events.html和https://vuejs.org/v2/guide/class-and-style.html

Answer 2

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

我如何将香草Js代码转换为Vue JS代码

2 个答案: