如何在javascript中使用@sign设置自定义属性

Question

我无法为按钮设置自定义属性。这是我的代码，请查收，谢谢。

btn.setAttribute('@click.prevent', 'login()')

<button name="user-auth-submited" id="user-auth-submit" class="user-auth-submit-btn" type="submit">ثبت نام</button>

我使用的是alpine.js，我应该使用@，并且我想将属性@click.prevent'，'login((切换为@click.provent'，'sregister((

Answer 1

您不能像这样设置动态属性，因为它发生在Alpine.js初始化之后，因此Alpine.jss对此一无所知。但有一种不同的方法，我们使用状态变量来跟踪用户是想登录还是注册。

<div x-data="{login: false}">
    <button @click="login = !login">Switch login/register mode</button></span>
    <button @click.prevent="login_or_register" x-text="login ? 'Login' : 'Register'"></button>
    <script>
        function login_or_register() {
            if (this.login) {
                // Login stuff
            }
            else {
                // Register stuff
            }
        }
    </script>
</div>

第一个按钮切换我们名为login的新状态。第二个按钮调用函数login_or_register，我们在其中访问this.login变量并执行所选的登录或注册代码。如果需要的话，您可以很容易地将其推广到更多的状态。