<!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数据模型

    引言 像大多数人一样,我在对一直传统的面向过程语言C一知半解之后,走进了面向对象的世界,尽管对OOP一无所知,还好Python还保留有函数式编程,这使得我才不那么抵触,直到现在,习惯了面向对象之后,也 ...

  2. 【代码笔记】iOS-手机系统版本

    一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, ...

  3. 【代码笔记】iOS-performSelectorOnMainThread

    代码: RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController : UIViewControl ...

  4. cmd--登录mysql

    cmd,Windows 命令提示符(cmd.exe)是 Windows NT 下的一个用于运行 Windows 控制面板程序或某些 DOS 程序的shell程序:或在 Windows CE 下只用于运 ...

  5. phpstudy集成下Apache配置部署https安全证书

    一..先申请到安全证书.(腾讯云或者阿里云申请免费1年的安全证书),怎么申请这里也说下(以腾讯云为例): 1.登录腾讯云QQ或微信登录都行,第一次登录要通过实名认证,点击[产品]---[ss证书l] ...

  6. Android 状态栏开发

    又好久没写了...还是记个笔记吧.这次关于Android手机App状态栏的各种处理做一个笔记. 场景一:需要做全屏,不看到手机状态栏信息(手机电量,信号等) 这种需求一般用的比较多的地方是App的Sp ...

  7. linux svn配置与使用

      svn错误码对照表: http://docs.sharpsvn.net/current/html/T_SharpSvn_SvnErrorCode.htm   https://www.cnblogs ...

  8. ESLint 使用方法

    一.全局安装 npm install -g eslint 二.生成配置文件 在项目根目录执行init,生成.eslintrc文件.在init时,要求根目录存在package.json.当然也可以直接复 ...

  9. C# 获得目录下所有文件或指定文件类型文件(包含所有子文件夹)

    public partial class FileGet { /// <summary> /// 私有变量 /// </summary> private static List ...

  10. FileStream常用的属性和方法：

    对流进行操作时要引用 using System.IO; 命名空间 FileStream常用的属性和方法: 属性: CanRead 判断当前流是否支持读取,返回bool值,True表示可以读取 CanW ...