Vue.js的小片段——Vue中切换登录方式

用 key 管理可复用的元素：

这里内代码主要是展现：使用用户名或者邮箱进行登录的切换

在<template>元素上使用 v-if 条件渲染分组的原因是：

因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。也就是<template>相当于一个盒子。

使用Vue里面的  v-if 和 v-else 渲染，即当条件符合时就显示 v-if 里面的内容，否则就显示 v-else 的内容

使用  v-on  渲染切换按钮，起到用户名和邮箱之间随意切换

Html内容：

<div id="aa"><template v-if="loginType === 'username'">                <label>Username</label>                <input placeholder="Enter your username">        <br/>        <br/>        <label>Password</label>        <input placeholder="Enter your password"></template><template v-else>  <label>Email</label>  <input placeholder="Enter your email address">  <br/>  <br/>  <label>Password </label>  <input placeholder="Enter your password"></template><br /><br/><button v-on:click="reverseMessage">切换为邮箱登录</button></div>

js内容：

var vm = new Vue({   el:'#aa',   data: {      loginType:'username'   },   methods: {      reverseMessage: function () {         var a = this.loginType ==='username' ? 'email':'username';         this.loginType = a;      }   }});

这里的“使用key管理可复用的元素“”主要体现在：

那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder。