一 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. CF916E Jamie and Tree 解题报告

    CF916E Jamie and Tree 题意翻译 有一棵\(n\)个节点的有根树,标号为\(1-n\),你需要维护一下三种操作 1.给定一个点\(v\),将整颗树的根变为\(v\) 2.给定两个点 ...

  2. Linux内核中的常用宏container_of其实很简单

    http://blog.csdn.net/npy_lp/article/details/7010752 通过一个结构体变量的地址,求该结构体的首地址. #ifndef CONTAINER_OF #de ...

  3. HDU 5650 异或

    so easy Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Sub ...

  4. DataGridView导出到Word

    #region 使用Interop.Word.dll将DataGridView导出到Word /// <summary> /// 使用Interop.Word.dll将DataGridVi ...

  5. 牛客多校第五场-D-inv

    链接:https://www.nowcoder.com/acm/contest/143/D来源:牛客网 题目描述 Kanade has an even number n and a permutati ...

  6. java修饰符——transient

    一.背景 上星期去CRM上开发一个功能,该系统里面有自动分页,需要在实体类里加入一个分页变量 // 分页 private PageInfo pageInfo = new PageInfo(); 这个本 ...

  7. hdu 2157 How many ways?? ——矩阵十题第八题

    Problem Description 春天到了, HDU校园里开满了花, 姹紫嫣红, 非常美丽. 葱头是个爱花的人, 看着校花校草竞相开放, 漫步校园, 心情也变得舒畅. 为了多看看这迷人的校园, ...

  8. div圆角

    div{    -moz-border-radius: 10px;    -webkit-border-radius: 10px;    border-radius: 10px;}

  9. bzoj 1188 SG函数

    首先我们可以把一个石子看成一个单独的游戏,那么我们可以发现所有位置的石子至于奇偶有关,因为某一个人操作其中的一个石子,我们可以用相同的石子做相同的操作,所以我们只需要保留下所有位置的01,那么对于每个 ...

  10. bzoj 1030 ac自动机

    比较容易看出来先建立ac自动机,然后在自动机上做DP,设w[0..1][i][j]为当前不包括/包括字典中的字符串,当前在自动机中走到第i个节点,完成的文本的长度为j的方案数,那么比较容易的转移w[i ...