VUE 实现tab切换效果

最新推荐文章于 2024-07-17 11:58:23 发布

那一日面朝大海

最新推荐文章于 2024-07-17 11:58:23 发布

阅读量511

点赞数

分类专栏：前端框架vue javascript

本文链接：https://blog.csdn.net/AN0692/article/details/89001996

版权

javascript 同时被 2 个专栏收录

46 篇文章 0 订阅

订阅专栏

前端框架vue

21 篇文章 0 订阅

订阅专栏

一：vue登录tab切换

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	 <style>
        ul li {
            list-style: none;
            display: inline-block;
            border: 1px solid dodgerblue;
            height: 30px;
            line-height: 30px;
            width: 120px;
            text-align: center;
        }
    </style>
</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="imgs/1.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 src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<div id="app">
        <ul>
            <!--- 给li标签绑定click时间,点击该li标签将索引传给函数重新赋值给num--->
            <li v-for="(index,item) in tabs" :class="{active:item == num}" @click="tab(item)">
                {{item}}{{index}}
            </li>
        </ul>
        <div class="tabCon">
            <!---  循环遍历tabContents数组中的元素,v-show绑定事件,当循环的索引等于num中的值,显示该itemCon值  --->
            <div v-for='(index,itemCon) in tabContents' v-show="itemCon == num">
                {{itemCon}}{{index}}
            </div>
        </div>
    </div>

<!--这里是js代码-->
<script type="text/javascript">
var vm = new Vue({
    el: '#app',
    data: {
        tabs: ["标题一", "标题二","标题三"],
        tabContents: ["内容一", "内容二","内容三"],
        num: ''
    },
    methods: {
        tab:function (item) {
            this.num = item;
        }
    }
});
</script>

那一日面朝大海

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE 实现tab切换效果

一：vue登录tab切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> ul li { list-style: none...
复制链接

扫一扫

专栏目录