<!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. CentOS 7环境下Pycharm安装流程记录

    1.准备安装文件: 方法1: 使用内置火狐浏览器访问下载最新格式为tar.gz的压缩包 网址:https://www.jetbrains.com/pycharm/download/previous.h ...

  2. 对象属性键值[key]属性问题

    1,obj[key]此时key代表是循环中的一个变量. var obj = {key:3,key1:1,key2:2,key3:3,toSting:4}; for (key in obj) { con ...

  3. Apache 、SUN、ORACLE

    Apache: 全称:Apache Software Foundation 解释:apache 软件基金会.是专门为支持开源软件项目而办的一个非盈利性组织.在它所支持的Apache项目与子项目中,所发 ...

  4. JavaScript高级编程——引用类型、Array数组使用、栈方法

    JavaScript高级编程——引用类型.Array数组使用.栈方法 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999 ...

  5. HTML标签参考（一）

    hi,小哥哥小姐姐们,我们今天要说的是前端的入门,却也是十分重要的意识的培养哦! • html中的标签数量是很多的,据人统计大概有300个左右,并且每年都会以20-30个的速度增加着,但是这么多的标签 ...

  6. 排序算法(6)--exchang Sorting--交换排序[1]--Bubble Sort--冒泡排序

    1.基本思想 冒泡排序的基本思想是,对相邻的元素进行两两比较,顺序相反则进行交换,这样,每一趟会将最小或最大的元素“浮”到顶端,最终达到完全有序 2.实现原理 冒泡排序是一种简单的排序算法,根据顺序两 ...

  7. org.springframework.web.util.NestedServletException Handler processing failed; n

    因为谷歌的lists不支持或使用, 所有要改成java的list工具 谷歌list使用: import com.google.common.collect.Lists; .... Lists.newA ...

  8. cf280C. Game on Tree(期望线性性)

    题意 题目链接 Sol 开始想的dp,发现根本不能转移(貌似只能做链) 根据期望的线性性,其中\(ans = \sum_{1 * f(x)}\) \(f(x)\)表示删除\(x\)节点的概率,显然\( ...

  9. js-ES6学习笔记-Iterator

    1.遍历器(Iterator)是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署Iterator接口,就可以完成遍历操作(即依次处理该数据结构的所有成员). 2.Iterator ...

  10. PHP-隐藏手机号中间四位

    substr_replace('手机号', '****', 3, 4);