<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="../Vue/vue.min.js"></script> </head> <body> <div id="app"> <template v-if="type == 'name'"> <label>用户名 </label> <input type="text" placeholder="输入用户名" key="name-input" /> </template> <template v-else> <label>邮箱账号 </label> <input type="text" placeholder="输入邮箱账号" key="mail-input" /> </template> <button v-on:click="changeClick">切换输入方式</button> </div> <script> var app = new Vue({ el: '#app', data: { type: 'name' }, methods: { changeClick: function () { this.type = this.type == 'name' ? 'mail' : 'name'; } } }) </script> </html>
