用条件循环v-if命令 页面显示用户名以及文本框 下方有按钮显示“切换” 点击切换按钮显示邮箱名以及文本框

在Vue.js中，你可以使用模板结合v-if指令来创建这样的界面。首先，你需要有一个包含用户信息的部分，包括用户名、文本框和初始状态下的按钮。当点击"切换"按钮时，通过改变v-if绑定的条件来切换显示的内容。

这里是一个简单的例子：

<div id="app">
  <h1>用户名:</h1>
  <input type="text" v-model="username" v-if="showUsername">
  
  <button @click="toggleFields">切换</button>
  <p v-if="!showUsername">显示邮箱：</p>
  <input type="text" v-model="email" v-if="showEmail">

  <script>
    new Vue({
      el: '#app',
      data: {
        username: '默认用户名',
        email: '默认邮箱',
        showUsername: true,
        showEmail: false
      },
      methods: {
        toggleFields() {
          this.showUsername = !this.showUsername;
          this.showEmail = !this.showEmail;
        }
      }
    })
  </script>
</div>

在这个例子中，当你初始化时，`showUsername`会被设置为`true`，所以会显示用户名输入框。点击"切换"按钮时，`showUsername`会被反转，隐藏并显示邮箱输入框；同理，显示邮箱时点击则切换回用户名。这样就实现了内容的切换。