一 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] permutations ii 全排列

    Given a collection of numbers that might contain duplicates, return all possible unique permutations ...

  2. HDU3579 线性同余方程（模板 余数不一定互质）

    Hello Kiki Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Su ...

  3. linux下bash脚本语法

    1.shell中的变量定义和引用(1)变量定义和初始化.shell是弱类型语言(语言中的变量如果有明确的类型则属于强类型语言:变量没有明确类型就是弱类型语言),和C语言不同.在shell编程中定义变量 ...

  4. C# 枚举的初始化

    3.2 枚举类型(Enum types)的默认值 对于枚举类型(Enum types),.NET会自动将字面值0(literal 0)隐式地转换为对应的枚举类型. 3.2.1 有一个0值成员 如果枚举 ...

  5. 关于$.data(element,key,value)与ele.data.(key,value)的区别

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. web性能优化方向

    1.服务器结构: ip负载均衡->缓存服务器->Nginx反向代理->应用服务器->数据库 2.博客链接:http://mp.weixin.qq.com/s?__biz=MzA ...

  7. 「模板」 01 Trie实现平衡树功能

    不想多说什么了.费空间,也不算太快,唯一的好处就是好写吧. #include <cstdio> #include <cstring> const int MAXN=100010 ...

  8. 使用pipenv管理python项目

    入门 首先使用pip安装Pipenv及其依赖项, pip install pipenv 1 然后将目录更改为包含你的Python项目的文件夹,并启动Pipenv, cd my_project pipe ...

  9. 记一次rsync日志报错directory has vanished

    中午两点的时候邮件告知rsync同部svn源库失败,看rsync日志报错显示如上,当时还在上课,没在公司,怀疑是不是有人动了svn的版本库,后来询问同事并通过vpn登录服务器上查看版本库是正常的,也没 ...

  10. JMeter 保持sessionId

    因项目需要,这几天用到了jmeter进行性能测试,测试的是一个管理系统,需要用户先登录,然后才能做操作的,其中就遇到了关于session的问题. 我使用的是badboy(版本2.1)进行的脚本录制,然 ...