一 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. bzoj1052: [HAOI2007]覆盖问题（二分+构造）

    貌似又写出了常数挺优(至少不劣)的代码>v< 930+人AC #49 写了个O(nlogn)貌似比一些人O(n)还快2333333 这题还是先二分答案,check比较麻烦 显然正方形一定以 ...

  2. 【树形DP】【P1351】 【NOIP2014D1T2】联合权值

    传送门 Description 无向连通图 \(G\) 有 \(n\) 个点, \(n-1\) 条边.点从 \(1\) 到 \(n\) 依次编号,编号为 \(i\) 的点的权值为 \(W_i\) ,每 ...

  3. GSM之AT操作命令详解20160615

    因工作接触到GSM模块,所以收集整理了一下关于操作GSM模块的AT命令的资料: 1.AT的历史与应用 1.1 AT的历史AT命令集是由拨号调制解调器(MODEM)的发明者贺氏公司(Hayes)为了控制 ...

  4. ACE自适配通信环境简介

    转载于:http://www.cnblogs.com/TianFang/archive/2006/12/03/580795.html ACE自适配通信环境 (Adaptive Communicatio ...

  5. How Many Nines ZOJ - 3950 打表大法好

    If we represent a date in the format YYYY-MM-DD (for example, 2017-04-09), do you know how many 9s w ...

  6. 移动端1px边框问题

    用于手机端受dpr的影响,实际开发中,PC端和移动端展示的效果不太一样,往往在PC端显示的是1px,移动端常常是偏粗一些. 解决办法: 主要是用到伪类及缩放.在需要画边框的元素上,设置一个伪类,它的伪 ...

  7. （第三章，第四章）http报文内的http信息，返回结果的http状态码

    第三章 http报文内的http信息 用于http协议交互的信息被称为http报文,包括请求报文和响应报文. 1.编码提升传输速率,在传输时编码能有效的处理大量的访问请求.但是编码的操作是计算机完成的 ...

  8. mvc BundleConfig实现对Css、Js压缩打包加载

    Bundle不是.net Framework框架中的一员,使用Bundle首先要先添加引用,如下: nuget包管理--程序包管理控制台--Install-Package Microsoft.AspN ...

  9. Flask中使用mysql

    Flask中使用mysql 先安装相关模块: pip  install  Flask-MySQL 先准备一下数据库 登录: mysql  -u  root  -p 创建Database和创建Table ...

  10. 表单元素（form、文本、按钮、选择）

    表单元素 一.form form代表表单,功能:用于申明表单,定义采集数据的范围,也就是<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里.<for ...