<!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. Linux常用基本命令(paste)

    paste命令 作用:合并文件 格式: paste [option] [file] 1,把两个文件的内容,按行合并 ghostwu@dev:~/linux/paste$ ls ghostwu1.txt ...

  2. Python selenium —— 父子、兄弟、相邻节点定位方式详解

    今天跟大家分享下selenium中根据父子.兄弟.相邻节点定位的方法,很多人在实际应用中会遇到想定位的节点无法直接定位,需要通过附近节点来相对定位的问题,但从父节点定位子节点容易,从子节点定位父节点. ...

  3. springboot项目中js、css静态文件路径访问

    springboot静态文件访问的问题,相信大家也有遇到这个问题,如下图项目结构. 项目结构如上所示,静态页面引入js.css如下所示. 大家肯定都是这样写的,但是运行的话就是出不来效果,图片也不显示 ...

  4. [可能不知道]什么是PeopleSoft的JOLT以及相关进程

    PeopleSoft applecation server依赖于Jolt,Jolt是与Tuxedo配套的产品,可以处理所有web请求.换句话说,Jolt是application server与web ...

  5. fastjson 反序列化漏洞利用总结

    比赛遇到了,一直没利用成功,这里做个记录. 环境搭建 首先用 vulhub 搭建 fastjson 的漏洞环境. 漏洞环境程序的逻辑为接收 body 的数据然后用 fastjson 解析. 漏洞利用 ...

  6. Expo大作战(二十八)--expo sdk api之Speach（语音文字转换），Segment

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

  7. 70部MAYA灯光材质渲染教程合集

    MAYA灯光材质渲染教程合集 教程格式:MP4和flv 两种格式 使用版本:教程不是一年出的教程,各个版本都有 (教程软件为英文版) 清晰度:可以看清软件上的文字 语言:部分中文字幕,其他英文(通过看 ...

  8. React 组件 API

    React 组件 API 在本章节中我们将讨论 React 组件 API.我们将讲解以下7个方法: 设置状态:setState 替换状态:replaceState 设置属性:setProps 替换属性 ...

  9. Solving the SQL Server Multiple Cascade Path Issue with a Trigger （转载）

    Problem I am trying to use the ON DELETE CASCADE option when creating a foreign key on my database, ...

  10. MySQL分析函数实现

    | MySQL分析函数实现还好MySQL8.0已经实现了与Oracle相同的分析函数. 1. 实现rownumSET @rn:=0;SELECT @rn:=@rn+1 AS rownum ,e.* F ...