点击事件功能在 Vue 组件上不起作用

Question

我对 Vue 框架相当陌生，当我尝试实现 onclick 事件处理函数时，它似乎不起作用。

下面是代码：

模板：

<template>
            </div>
            <div class = "btn-field">
                <button type ="button" id="signup">Sign up</button>
                <button type ="button" id="signin" class= "disable">Sign in</button>
                </div>

</template>

风格：

<style>

.btn-field button{ 
    color: #3c00a0;
    transition: background 1s;
}



.btn-field button.disable{
    background: #eaeaea;
    color: rgb(85, 85, 85);
}



</style>

脚本：

<script>

let signup = document.getElementById("signup");

let signin = document.getElementById("signin");

let name = document.getElementById("name");

let title = document.getElementById("title");

signin.onclick = function(){

nameField.style.maxHeight = "0";

title.innerHTML = "Sign In";

signup.classList.add("disable");

signin.classList.remove("disable");

}

</script>

Answer 1

在 Vue 中很少需要使用

document.getElementByid

等 DOM API。
在您的情况下，您只需将

ref

和

click

属性添加到 html 元素即可。

查看docs

中的示例