VUE案例1：账号和邮箱相互切换 JSON提交数据

本文介绍了VUE案例1：账号和邮箱相互切换 JSON提交数据，这在页面注册或登录时非常多见，比较说使用手机号登录，或是邮箱名登录之类的，点击一下就能切换到不一样的需要页面。没有写CSS样式。

效果如下：

代码如下：

template代码

<template>
  <div class="demo">
    <span v-if="isTrue">
      <label for="username">用户账号</label>
      <input type="text" id="username" v-model="form.username" key="username" placeholder="用户账号" />
    </span>
    <span v-else>
      <label for="email"> 用户邮箱 </label>
      <input type="text" id="email" v-model="form.email" key="email" placeholder="用户邮箱" />
    </span>

    <button type="button" @click="isTrue = !isTrue">点击切换</button>
    <button type="button" @click="mySubmit">提交</button>

    <p>{{ form.msg1 }}</p>
  </div>
</template>

 

script代码

<script>
export default {
  data() {
    return {
      isTrue: true,
      form: {},
    };
  },
  methods: {
    mySubmit() {
      let msg2 = "您提交的数据：" + JSON.stringify(this.form);
      this.$set(this.form, "msg1", msg2);
    },
  },
};
</script>