Javascript VueJS模板-在登录表单和；登记表

我正在尝试在“登录表单”和“注册表单”之间切换。我试图使用我在codepen上遇到的代码。代码运行得很好，但是当我将HTML代码集成到Vue模板中时，表单不会翻转到“创建帐户”表单。我已经注意到JavaScript中有一些东西需要纠正，但我无法确切理解是什么

我的代码如下：

HTML

JavaScript

<script>
$('.message a').click(function(){
   $('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});
</script>

// Vue component: login-page
const LoginPage = {
    template: '#login-page',
    data() {
        return {
            login_message: 'Please enter your credentials to login.',
            currentForm: 'login',
            }
        },
    computed: {
        showRegisterForm() {
            return this.currentForm === 'register';
        },
        showLoginForm() {
            return this.currentForm === 'login';
            },
        },
    methods: {
        toggleForm(formName) {
        this.currentForm = formName;
        },
    },
}

// Vue component: login-page
const LoginPage = {
    template: '#login-page',
    data() {
        return {
            currentForm: 'login',
            }
        },
    methods: {
        toggleForm()
        {
            this.currentForm = this.currentForm === 'login' ? 'register' : 'login';
        }
    },
}

$（'.message a'）。单击（函数（）{
$（'form'）.animate（{height:“toggle”，opacity:“toggle”}，“slow”）；
});

CSS

@导入url(https://fonts.googleapis.com/css?family=Roboto:300);
.登录页面{
宽度：360px；
填充：8%0；
保证金：自动；
}
.表格{
位置：相对位置；
z指数：1；
背景：#FFFFFF；
最大宽度：360px；
保证金：0自动100px；
填充：45px；
文本对齐：居中；
长方体阴影：0 0 20px 0 rgba（0,0,0,0.2），0 5px 5px 0 rgba（0,0,0,0.24）；
}
.表格输入{
字体系列：“Roboto”，无衬线；
大纲：0；
背景#f2f2；
宽度：100%；
边界：0；
利润率：0.15px；
填充：15px；
框大小：边框框；
字体大小：14px；
}
.表格按钮{
字体系列：“Roboto”，无衬线；
文本转换：大写；
大纲：0；
背景#4CAF50；
宽度：100%；
边界：0；
填充：15px；
颜色：#FFFFFF；
字体大小：14px；
-webkit过渡：所有0.3易用性；
过渡：全部0.3缓；
光标：指针；
}
.窗体按钮：悬停，.窗体按钮：活动，.窗体按钮：焦点{
背景#43A047；
}
.表格.留言{
利润率：15px0；
颜色：#B3；
字体大小：12px；
}
.表格.留言{
颜色：#4CAF50；
文字装饰：无；
}
.表格.登记表格{
显示：无；
}
.集装箱{
位置：相对位置；
z指数：1；
最大宽度：300px；
保证金：0自动；
}
.container:之前，.container:之后{
内容：“；
显示：块；
明确：两者皆有；
}
.container.info{
保证金：50px自动；
文本对齐：居中；
}
.container.info h1{
利润率：0.15px；
填充：0；
字体大小：36px；
字体大小：300；
颜色：#1A1A；
}
.container.info span{
颜色：#4d；
字体大小：12px；
}
.container.info span a{
颜色：#000000；
文字装饰：无；
}
.container.info span.fa{
颜色：#EF3B3A；
}
身体{
背景：#76b852；/*旧浏览器的回退*/
背景：-webkit线性梯度（右，#76b852，#8DC26F）；
背景：-莫兹线性梯度（右，#76b852，#8DC26F）；
背景：-o-线性梯度（右，#76b852，#8DC26F）；
背景：线性梯度（向左，#76b852，#8DC26F）；
字体系列：“Roboto”，无衬线；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
}

您混淆了Vue作为库和Vue作为框架的使用。看起来，您实际上正在尝试使用Vue作为库，因此我相应地更改了代码。您只需要添加一个转换，有关更多信息，请查看文档

HTML:

CSS:

解决方案对我来说很有用，除了JavaScript代码的前两行必须更改之外，因为在我的例子中，我有一个现有的Vue，它调用登录组件，然后激活登录模板

JavaScript

<script>
$('.message a').click(function(){
   $('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});
</script>

// Vue component: login-page
const LoginPage = {
    template: '#login-page',
    data() {
        return {
            login_message: 'Please enter your credentials to login.',
            currentForm: 'login',
            }
        },
    computed: {
        showRegisterForm() {
            return this.currentForm === 'register';
        },
        showLoginForm() {
            return this.currentForm === 'login';
            },
        },
    methods: {
        toggleForm(formName) {
        this.currentForm = formName;
        },
    },
}

// Vue component: login-page
const LoginPage = {
    template: '#login-page',
    data() {
        return {
            currentForm: 'login',
            }
        },
    methods: {
        toggleForm()
        {
            this.currentForm = this.currentForm === 'login' ? 'register' : 'login';
        }
    },
}

---

虽然@Fred接受了@chr的回答，但这（仍然）是对Vue的错误使用。
（请注意，这不是为了重现工作小提琴，而是为了回答如何使用更面向Vue的方法在“登录表单”和“注册表单”之间切换的一般问题）

在Vue的操作方式中，登录表单和注册表单之间的切换应该通过标记完成，使用而不是调用函数

showRegisterPerform（）

和

showLoginForm（）

toggleForm

不需要参数，因为模型已经知道

currentForm

的值

if

和

else

是最简单的方法，可以利用Vue模型中的属性，例如chr在回答中引入的

currentForm:“login”

。
HTML只需要轻微的更改

<div id="login-page" class="login-page">
  <div class="form">
    <form v-if="currentForm.toLowerCase() === 'register'" class="register-form">
      <input type="text" placeholder="name"/>
      <input type="password" placeholder="password"/>
      <input type="text" placeholder="email address"/>
      <button>create</button>
      <p class="message">Already registered?
          <a href="#" @click.prevent="toggleForm()">Sign In</a></p>
    </form>
    <form v-else class="login-form">
      <input type="text" placeholder="username"/>
      <input type="password" placeholder="password"/>
      <button>login</button>
      <p class="message">Not registered?
          <a href="#" @click.prevent="toggleForm()">Create an account</a></p>
    </form>
  </div>
</div>

当

currentForm

的值更改时，Vue将负责更改将显示的表单

另请参见问题的答案，了解更一般的方法。

代码也可以工作，而且更简洁，除了第一种形式应该在单引号中包含寄存器，即“register”，下面对其进行了更正

HTML

CSS

---

看起来您正在Vue中使用jQuery，是否确实已导入jQuery库并且已设置$reference？最终，它只是通过添加动画来切换css属性，如果需要的话，不需要jQuery就可以轻松完成。是的，我已经设置了jQuery库。这对我来说很有用。只需更改JavaScript代码的前两行，因为在我的例子中，我有一个现有的Vue，它调用登录组件，然后激活登录模板。我的错：），至少我们解决了这个问题。这同样有效，而且是一个更整洁的代码，除了第一个表单应该有单引号中的寄存器，即“寄存器”

// Vue component: login-page
const LoginPage = {
    template: '#login-page',
    data() {
        return {
            login_message: 'Please enter your credentials to login.',
            currentForm: 'login',
            }
        },
    computed: {
        showRegisterForm() {
            return this.currentForm === 'register';
        },
        showLoginForm() {
            return this.currentForm === 'login';
            },
        },
    methods: {
        toggleForm(formName) {
        this.currentForm = formName;
        },
    },
}

<div id="login-page" class="login-page">
  <div class="form">
    <form v-if="currentForm.toLowerCase() === 'register'" class="register-form">
      <input type="text" placeholder="name"/>
      <input type="password" placeholder="password"/>
      <input type="text" placeholder="email address"/>
      <button>create</button>
      <p class="message">Already registered?
          <a href="#" @click.prevent="toggleForm()">Sign In</a></p>
    </form>
    <form v-else class="login-form">
      <input type="text" placeholder="username"/>
      <input type="password" placeholder="password"/>
      <button>login</button>
      <p class="message">Not registered?
          <a href="#" @click.prevent="toggleForm()">Create an account</a></p>
    </form>
  </div>
</div>

const model = new Vue({
    data : {
        'currentForm' : 'login',
        ...
    },
    ...
    methods : {
        toggleForm() {
            this.currentForm = this.currentForm === 'login' ? 'register' : 'login';
        }
    },
    ...
});

<div id="login-page" class="login-page">
    <span><h1>{{currentForm.toUpperCase()}} FORM</h1></span>
    <span><h5>Please enter your credentials to {{currentForm.toLowerCase()}}.</h5></span>
    <div class="form">
        <form v-if="currentForm.toLowerCase() === 'register'" class="register-form">
        <input type="text" placeholder="name"/>
        <input type="password" placeholder="password"/>
        <input type="text" placeholder="email address"/>
        <button>create</button>
        <p class="message">Already registered? <a href="#" @click.prevent="toggleForm()">Sign In</a></p>
        </form>
        <form v-else class="login-form">
        <input type="text" placeholder="username"/>
        <input type="password" placeholder="password"/>
        <button>login</button>
        <p class="message">Not registered? <a href="#" @click.prevent="toggleForm()">Create an account</a></p>
        </form>
    </div>
</div>

// Vue component: login-page
const LoginPage = {
    template: '#login-page',
    data() {
        return {
            currentForm: 'login',
            }
        },
    methods: {
        toggleForm()
        {
            this.currentForm = this.currentForm === 'login' ? 'register' : 'login';
        }
    },
}

@import url(https://fonts.googleapis.com/css?family=Roboto:300);

.login-page {
  width: 360px;
  padding: 8% 0 0;
  margin: auto;
}
.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.form button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #4CAF50;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
  background: #43A047;
}
.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}
.form .message a {
  color: #4CAF50;
  text-decoration: none;
}

.container {
  position: relative;
  z-index: 1;
  max-width: 300px;
  margin: 0 auto;
}
.container:before, .container:after {
  content: "";
  display: block;
  clear: both;
}
.container .info {
  margin: 50px auto;
  text-align: center;
}
.container .info h1 {
  margin: 0 0 15px;
  padding: 0;
  font-size: 36px;
  font-weight: 300;
  color: #1a1a1a;
}
.container .info span {
  color: #4d4d4d;
  font-size: 12px;
}
.container .info span a {
  color: #000000;
  text-decoration: none;
}
.container .info span .fa {
  color: #EF3B3A;
}
body {
  background: #76b852; /* fallback for old browsers */
  background: -webkit-linear-gradient(right, #76b852, #8DC26F);
  background: -moz-linear-gradient(right, #76b852, #8DC26F);
  background: -o-linear-gradient(right, #76b852, #8DC26F);
  background: linear-gradient(to left, #76b852, #8DC26F);
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;      
}