<!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. Asp.Net里关于Session过期跳转页面的一些小技巧

    这里算是自己的个人随笔吧,仅供参考使用,后续有更好的方法再做补充 之前在Aspx页面里面,在Session过期的时候我经常会使用 Server.Transfer("b.aspx") ...

  2. 在Windows上搭建kafka环境

    英文文档:https://dzone.com/articles/running-apache-kafka-on-windows-os 第一步:安装JDK 百度很多,不赘述 第二步:安装ZooKeepe ...

  3. 【代码笔记】iOS-自定义switch

    一,效果图. 二,工程图. 三,代码. ViewController.h #import <UIKit/UIKit.h> #import "CustomSwitch.h" ...

  4. javaSE中JDK提供的四种线程池

    对javaSE中JDK提供的四种线程池稍作整理   一.Executor   package java.util.concurrent; /** * @since 1.5 * @author Doug ...

  5. ionic开发之Android的focus起作用，而iOS不起作用

    基于ionic的iOS的hybird APP无法使用focus获取焦点和键盘的问题. 解决办法就是: 原本APP的配置文件config.xml里面默认有一句 这句话的大概意思就是键盘的显示需要用户去触 ...

  6. 【Java入门提高篇】Day19 Java容器类详解（二）Map接口

    上一篇里介绍了容器家族里的大族长——Collection接口,今天来看看容器家族里的二族长——Map接口. Map也是容器家族的一个大分支,但里面的元素都是以键值对(key-value)的形式存放的, ...

  7. 重学C语言---05运算符、表达式和语句

    一.循环简介 实例程序 /*shoes1.c--把一双鞋的尺码变为英寸*/#include <stdio.h>#define ADJUST 7.64#define SCALE 0.325 ...

  8. C#多线程的用法6-线程间的协作Mutex

    Mutex在线程协作的过程中起互斥的左右,效果与线程锁类似. /// <summary> /// 多线程协作-Mutex /// </summary> private stat ...

  9. HDFS hflush hsync和close的区别

    HDFS的hflush,hsync和close有啥区别,分别做了什么 hflush: 语义是保证flush的数据被新的reader读到,但是不保证数据被datanode持久化. hsync: 与hfl ...

  10. VUE中v-on:click事件中获取当前dom元素

    在开发中总是忘记, 特意在此记录 关键字:   $event     <div class="bed" v-on:click="updateBed(index,$e ...