如何在Vue中单击按钮时呈现表单？答案

【问题标题】：How to render form on button clic in Vue?如何在Vue中单击按钮时呈现表单？
【发布时间】：2021-05-21 09:38:55
【问题描述】：

我在一个页面上有两个注册表单，但我只想通过单击适当的按钮来呈现一个：“合同表”或“公司表”。我应该用 v-if 来做吗？在下面的代码中，我只是复制了几行表格。

<template>
  <div>
    <button @click="contract">UMOWA</button>
    <button @click="company">FIRMA</button>
    <div v-if="contract">
      <form method="post" @submit.prevent="onSubmit">
        <label for="firstname">IMIĘ</label>
        <input id="firstname" v-model="firstName" type="text" required />
        <label for="lastname">NAZWISKO</label>
        <input id="lastname" v-model="lastName" type="text" required />

        <button type="submit">Zarejestruj się</button>
      </form>
    </div>
    <div v-if="company">
      <form method="post" @submit.prevent="onSubmit">
        <label for="firstname">IMIĘ</label>
        <input id="firstname" v-model="firstName" type="text" required />
        <label for="lastname">NAZWISKO</label>
        <button type="submit">Zarejestruj się</button>
        <input id="lastname" v-model="lastName" type="text" required />
        <label for="email">ADRES E-MAIL</label>
        <input id="email" v-model="email" type="text" required />
        <button type="submit">Zarejestruj się</button>
      </form>
    </div>
  </div>
</template>

【问题讨论】：

标签： vue.js nuxt.js

【解决方案1】：

是的，但您需要在按钮 onclick 中添加 true：

<button @click="contract = true">UMOWA</button>
<button @click="company = true">FIRMA</button>

【讨论】：