directive:

by edith_tang

HTML

<div id="app">
  <!--  -->
  <template v-if="type === 'name'">
      <labe>用户名：</labe>
      <input placeholder="请输入用户名" key="name-input"/>
  </template>
  <template v-else>
      <label>邮箱：</label>
      <input placeholder="请输入邮箱" key="mail-input"/>
  </template>
  <button @click="changeMethod">切换登入方式</button>
</div>

CSS

button {
  border: none;
  background-color: skyblue;
  color: #fff;
  padding:5px 10px;
  margin-left: 20px;
}

JavaScript

var app = new Vue({
	el: '#app',
  data: {
  	type: 'name'
  },
  methods: {
  	changeMethod: function() {
    	this.type = this.type === 'name' ? 'mail' : 'name'; 
    }
  }
})