Vue之 根据下switch开关不同动态显示不同的表单数据

可以使用v-if指令根据开关状态来动态显示/隐藏表单数据。

示例代码如下：

<template>
  <div>
    <label>是否显示表单：</label>
    <input type="checkbox" v-model="showForm">

    <div v-if="showForm">
      <label>姓名：</label>
      <input type="text" v-model="name">

      <label>年龄：</label>
      <input type="number" v-model="age">
    </div>

    <div v-else>
      <p>表单已关闭</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showForm: false,
      name: '',
      age: null
    }
  }
}
</script>

在上述示例中，我们使用了一个布尔类型的变量showForm来控制表单的显示/隐藏。当showForm为true时，显示表单数据；当showForm为false时，显示“表单已关闭”的提示信息。

通过v-if指令，我们可以根据showForm的值来动态显示/隐藏不同的内容。同时，我们也可以使用v-model指令来实现表单数据的双向绑定。当表单数据发生变化时，组件的data中的对应变量也会随之更新