Vue實戰--學習筆記520（v-if 切換輸入內容）
阿新 • • 發佈：2021-08-05
<!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>