<!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>

Vue登录方式的切换的更多相关文章

  1. MySQL5.7.12新密码登录方式及密码策略

    在Centos6.6上安装MySQL5.7.12时,遇到了一个问题 安装后在/root目录下没有发现有.mysql_secret这个文件,所以没有没法按照官方文档上说的那样使用,这里记录下, 解决方式 ...

  2. vue 2.0 路由切换以及组件缓存源代码重点难点分析

    摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...

  3. stackstorm docker中配置ssh免密码登录方式

    在docker中配置st2的ssh登录方式折腾了好久,今天终于彻底搞懂了如何重启容器后也不丢失之前的配置,只要容器起来后就可以正常ssh 执行st2中的remote-shell-script 和rem ...

  4. 手机app开发：浅谈APP登录方式的优劣

    手机app开发公司亿合科技要是给你一个机会设计一款APP,你会用什么方式做这个APP的登录模块?根据APP的业务模型的不同会有不同的设计方法.如果是偏内容型的APP,需要优先展示内容给用户,当用户需要 ...

  5. [Android]解决3gwap联网失败：联网请求在设置代理与直连两种方式的切换

    [Android]解决3gwap联网失败:联网请求在设置代理与直连两种方式的切换 问题现象: 碰到一个问题,UI交互表现为:联通号码在3gwap网络环境下资源一直无法下载成功. 查看Log日志,打印出 ...

  6. SSH证书登录方式（无password验证登录)

    经常在工作中须要在各个Linux机间进行跳转,每次password的输入成了麻烦,并且也不安全.在实际使用中,在windows下常使用secureCRT工具或teraterm工具进行SSH登录.以及实 ...

  7. URL Scheme吊起app实现另外一种登录方式

    https://developer.apple.com/library/content/featuredarticles/iPhoneURLScheme_Reference/Introduction/ ...

  8. python相关注册登录方式

    1.使用django自带功能实现登录/退出登录 使用django自带登录功能,前提生成用户(用户注册)使用的是django自带的user,或称models中用户表继承于django自带的user 1. ...

  9. mysql数据库在linux上的不同登录方式和权限

    在我的上两篇博文里,一篇是安装,一篇是配置远程登录, 提君博客原创 >>提君博客原创  http://www.cnblogs.com/tijun/  << 所以我的mysql的 ...

随机推荐

  1. python基础训练题1-列表操作

    1,在列表末尾添加一个值 >>> l = [ 10, 20 ] >>> l [10, 20] >>> l.append( 'ghostwu' ) ...

  2. FZU1759(SummerTrainingDay04-B 欧拉降幂公式)

    Problem 1759 Super A^B mod C Accept: 1056    Submit: 3444Time Limit: 1000 mSec    Memory Limit : 327 ...

  3. format格式化字符串

    假如想要表达这样一条语句:李明今年十二岁 输出这样一条语句 name = 'LiMing' age = 12 print( name + 'is' + age + 'years old') #输出 L ...

  4. layui实现复选框全选，反选

    html <div class="layui-input-inline"> <input type="checkbox" class=&quo ...

  5. 【代码笔记】iOS-4个可以单独点击的button

    一,效果图. 二,工程图. 三,代码. ViewController.m #import "ViewController.h" @interface ViewController ...

  6. 关于DAL层使用静态方法，并在WEB层直接调用的问题

    同样的疑惑,记录一下吧: http://bbs.csdn.net/topics/360204198 DAL静不静态看connection等关键资源是否静态 比如下面的代码,就算静态也没事 public ...

  7. window下安装RabbitMQ

    RabbitMQ: MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.应用程序通过读写出入队列的消息(针对应用程序的数据)来通信,而无需专用连接来链接它们.消 ...

  8. json_encode无返回结果

    今天写php curl模拟客户端访问测试一个抽奖post数据,拿回来的数据是json,使用json_decode函数就是没结果,百度谷歌好久.终于发现是BOM的文件头造成的, 微软为utf-8文件添加 ...

  9. VMware部署ubuntu后开机提示piix4_smbus: Host SMBus controller not enabled!

    在虚拟机部署ubuntu10.04-server,每次启动完成之后,出现“piix4_smbus0000:00:07.3: Host SMBus controller not enabled!”提示信 ...

  10. Mbps Mb M Kb如何换算

    在传输单位的写法上,B 和 b 分别代表 Bytes 和 bits,两者的定义是不同的,具体换算公式如下:1 Byte = 8 bits 1 Kb = 1024 bits 1 KB = 1024 by ...