一 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. Kippo蜜罐的部署、诱捕节点的搭建以及自动告警

    Kippo是一个中等交互的SSH蜜罐,提供了一个可供攻击者操作的shell,攻击者可以通过SSH登录蜜罐,并做一些常见的命令操作. 当攻击者拿下一台服务器的权限后,很可能会进行小范围的端口探测或者批量 ...

  2. 20165218 2017-2018-1 《Java程序设计》第一周学习总结

    20165218 2017-2018-1 <Java程序设计>第一周学习总结 教材学习内容总结 第一章.Java入门 1. Java特点 Java具有简单.面向对象.平台无关.多线程.动态 ...

  3. ES6箭头函数总结

    1. 箭头函数基本形式 let func = (num) => num; let func = () => num; let sum = (num1,num2) => num1 + ...

  4. redux样板代码简化写法

    直接使用redux,要写很多样板代码,大量的actiontype,actionCreator.一个异步的方法要写三个actiontype,三个actionCreator,十分繁琐.下面是本人使用的一种 ...

  5. 51nod 1296 有限制的排列（DP）

    对于一个i,如果要比邻居大,那么i比i-1大,i+1比i小,比邻居小同理.设v[i]=0表示i与i-1的关系无限制,v[i]=1表示a[i-1]>a[i],v[i]=2表示a[i-1]<a ...

  6. 51nod 1172 Partial Sums V2 卡精度的任意模数FFT

    卡精度的任意模数fft模板题……这道题随便写个表就能看出规律来(或者说考虑一下实际意义),反正拿到这题之后,很快就会发现他是任意模数fft模板题.然后我就去网上抄了一下板子……我打的是最土的任意模数f ...

  7. SQL_MODE

    一 声明 标红部分为重点了解 原文:https://segmentfault.com/a/1190000005936172 二 SQL_MODE参数值 官方手册专门有一节介绍 https://dev. ...

  8. 一个简单的适用于Vue的下拉刷新，触底加载组件

    一个简单的适用于Vue的上拉刷新,触底加载组件,没有发布npm需要时直接粘贴定制修改即可 <template> <div class="list-warp-template ...

  9. 面向小数据集构建图像分类模型Keras

    文章信息 本文地址:http://blog.keras.io/building-powerful-image-classification-models-using-very-little-data. ...

  10. Codeforces Round #540 (Div. 3) 部分题解

    Codeforces Round #540 (Div. 3) 题目链接:https://codeforces.com/contest/1118 题目太多啦,解释题意都花很多时间...还有事情要做,就选 ...