Vue登录方式的切换

最新推荐文章于 2024-07-26 15:54:19 发布

weixin_30263073

最新推荐文章于 2024-07-26 15:54:19 发布

阅读量893

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/wangshuang123/p/10777586.html

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>登录方式的切换</title>
   </head>
   <body>
       <div id="app">
           <template v-if="loginType==='email'">
               <label>邮箱</label>
               <input type="text" placeholder="请输入邮箱号" />
           </template>

           <template v-else-if="loginType==='phone'">
               <label>手机号</label>
               <input type="text" placeholder="请输入手机号" />
           </template>

           <button @click="btn">切换</button>
       </div>

       <script src="vue.js"></script>
       <script>
           new Vue({
               el: "#app",
               data: {
                   loginType: 'email'
               },
               methods: {
                   btn: function() {
                       console.log(this.loginType)
                       // 第一种方式
                       //this.loginType = (this.loginType === "email") ? 'phone' : 'email';

                       //第二方式
                       if (this.loginType == 'email') {
                           this.loginType = 'phone'
                       } else {
                           this.loginType = 'email'
                       }
                       return this.loginType;
                   }

               }

           })
       </script>
   </body>
</html>