一 163邮箱登录tab切换

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>

        ul li {

            list-style: none;

            display: inline-block;

            border: 1px solid dodgerblue;

            height: 30px;

            line-height: 30px;

            width: 120px;

            text-align: center;

        }

    </style>

    <script src="vue.js"></script>

</head>

<body>

<div id="box">

    <ul>

        <li v-on:click="qh(true)">

           <span >二维码登录</span>

        </li>

        <li v-on:click="qh(false)">

            <span >邮箱登录</span>

        </li>

    </ul>

    <div style="margin-left:80px" v-if="temp">

        <img src="getUrlQrcode.jpg" alt="">

    </div>

    <div style="margin-left:80px" v-if="!temp">

        <form action="https://mail.163.com/" method="post">

            <p><input type="email"></p>

            <p><input type="password"></p>

            <p><input type="submit" value="登录"></p>

        </form>

    </div>

</div>

<script>

    new Vue({

        el: '#box',

        data: {

            temp:true

        },

        methods:{

            qh:function (t) {

                console.log(t);

                this.temp=t

            }

        }

    })

</script>

</body>

</html>

二 实现效果

三 Tab切换多页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

     <style>

        ul li {

            list-style: none;

            display: inline-block;

            border: 1px solid dodgerblue;

            height: 30px;

            line-height: 30px;

            width: 120px;

            text-align: center;

        }

    </style>

    <!-- 引用vue.js文件 -->

    <script src="vue.js"></script>

</head>

<div id="app">

        <ul>

            <!--- 给li标签绑定click时间,点击该li标签将索引传给函数重新赋值给num--->

            <li v-for="(index,item) in tabs" :class="{active:index == num}" @click="tab(index)">

                {{item}}{{index}}

            </li>

        </ul>

        <div class="tabCon">

            <!---  循环遍历tabContents数组中的元素,v-show绑定事件,当循环的索引等于num中的值,显示该itemCon值  --->

            <div v-for='(index,itemCon) in tabContents' v-show="index == num">

                {{itemCon}}{{index}}

            </div>

        </div>

    </div>

<!--这里是js代码-->

<script type="text/javascript">

var vm = new Vue({

    el: '#app',

    data: {

        tabs: ["标题一", "标题二","标题三"],

        tabContents: ["内容一", "内容二","内容三"],

        num: ''

    },

    methods: {

        tab:function (index) {

            this.num = index;

        }

    }

});

</script>

四 Tab切换多页面效果

　　

VUE 实现tab切换页面效果的更多相关文章

  1. vue类似tab切换的效果，显示和隐藏的判断。

    两者切换,动态显示对应的列表详情. 通过v-show的判断 数据驱动

  2. vue 实现tab切换动态加载不同的组件

    vue 实现tab切换动态加载不同的组件 使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...

  3. vue封装tab切换

    vue封装tab切换 预览: 第一种 通过父传子标题,子传父事件 子组件 <template> <div class='app'> <div class="ta ...

  4. vue实现tab切换

    需要弄类似tab切换的功能就是一个点击切换上一页下一页的页面 找到这个获得灵感 <!DOCTYPE html> <html lang="en"> <h ...

  5. vue实现tab切换功能

    最近用vue做一个页面的tab功能,经过一查找资料,没用路由,也没用动态组件,完美实现了tab切换功能,效果如下 下面是代码实现,这是模板 <article id="example&q ...

  6. vue -vantUI tab切换时 list组件不触发load事件解决办法

    最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...

  7. Android切换页面效果的实现二：WebView+ViewPager

    前言: 由于第一种切换页面的效果不能满足项目的要求,于是又找到另外一种更简单好用的方法来实现,顿时感觉,做项目开发,找到一种合适的方法能够减少很多时间,(刚开始自己弄的时候还想着自己写手势识别的方法呢 ...

  8. Android切换页面效果的实现一：WebView+ViewFlipper

    前言: 这两周在帮学校做一个新生入学用的“新里程”的项目,要做到页面切换阅读的效果,自己百度了下,找到普遍是使用WebView+ViewFlipper的实现方法,但这种方法不能满足我的要求,因为它很难 ...

  9. tab切换的效果——仿照今日头条APP的切换效果

    说点废话;不知道是哪一版本起头条的tab切换效果就变了,一直琢磨着这个事,去度娘那里也没有什么结果:正好这两天有空就尝试做了一下:用前端的技术来实现: 先看效果吧:上面的tab随着slide滑动,上面 ...

随机推荐

  1. [Leetcode] valid parentheses 有效括号对

    Given a string containing just the characters'(',')','{','}','['and']', determine if the input strin ...

  2. python高效学习路线图

  3. spring的RestTemplate使用指南

    前言:现在restful接口越来越广泛,而如今很多接口摒弃了传统的配置复杂的webService开发模式,在java领域只需要很简单的springMvc就可以声明为一个控制器,再加上service层, ...

  4. 直通BAT面试算法精讲课1

    1.有一棵二叉树,请设计一个算法,按照层次打印这棵二叉树. 给定二叉树的根结点root,请返回打印结果,结果按照每一层一个数组进行储存,所有数组的顺序按照层数从上往下,且每一层的数组内元素按照从左往右 ...

  5. 为什么使用centos部署服务器

    这个是实验室同学面试的时候,面试官问的一个问题? 为什么选择centos系统,为什么centos系统用的比较多呢? 首先我们说下redhat红帽公司,它是全球最大的linux服务提供商,它的服务是最好 ...

  6. SSH内存泄露及Spring Quartz问题

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明 http://www.blogbus.com/anoxia-logs/34360203.html 问题的起因: 为客户开发了一个系统权 ...

  7. 51Nod 1305 Pairwise Sum and Divide | 思维 数学

    Output 输出fun(A)的计算结果. Input示例 3 1 4 1 Output示例 4 first try: #include "bits/stdc++.h" using ...

  8. JAVA JDBC(存储过程和事务管理)

    1.什么是存储过程 存储过程(Stored Procedure)是在大型数据库系统中,一组为了完成特定功能的SQL 语句集,存储在数据库中,经过第一次编译后再次调用不需要再次编译,用户通过指定存储过程 ...

  9. jquery的基础语法、选取元素、操作元素、加事件、挂事件及移除事件

    jquery基础知识 1.jquery文件的引入,所有的js代码要写在下面那段代码下面. <script src="../jquery-1.11.2.min.js">& ...

  10. Unity下的ECS框架 Entitas简介

    最近随着守望先锋制作组在gdc上发布的一个关于ecs的talk,ecs这个架构算是得到了一定的曝光度. 在这之前,github上就一直有一个C#的ecs框架名为Entitas,截止现在已经有1300+ ...