8.vue学习之小案例----选项卡的制作

最新推荐文章于 2024-04-11 11:03:20 发布

彼岸的饭碗

最新推荐文章于 2024-04-11 11:03:20 发布

阅读量168

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_42392049/article/details/116982777

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .box .header{
            height: 45px;
            background:aliceblue;
        }
        .box{
            width: 303px;
            margin:100px auto;
        }
        .box .header span{
            float:left;
            width:100px;
            border-right:1px solid #fff;
            text-align: center;
            color: lawngreen;
            background: lightcoral;
        }
        .box .header .cur{
            float:left;
            width:100px;
            border-right:1px solid #fff;
            text-align: center;
            color: lawngreen;
            background:white;
        }
        .box .content{
            line-height:30px;
            font-size: 14px;
            padding: 5px;
        }
        .box .content p{
            border-bottom: 1px soild lightcyan;
        }
    </style>
</head>
<body>
    <div id="app" class="box">
        <div class="header">
            <!----cur的显示状态是根据curState的状态进行显示的，如果curState==index则class变成cur-->
            <!--displayState事件的作用是将当前的span的index传出去，-->>
            <span :class="{cur: curState==index}" v-for="(item,index) in htitile"  @mouseenter="displayState(index)">{{item}}</span>
        </div>
        <div class="content" v-show="curState==0">
            <p>首页 首页 首页</p>
            <p>首页 首页 首页</p>
            <p>首页 首页 首页</p>
            <p>首页 首页 首页</p>
            <p>首页 首页 首页</p>
            <p>首页 首页 首页</p>
            <p>首页 首页 首页</p>
        </div>
        <div class="content" v-show="curState==1">
            <p>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</p>
            <p>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</p>
            <p>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</p>
            <p>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</p>
            <p>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</p>
            <p>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</p>
            <p>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</p>
        </div>
        <div class="content" v-show="curState==2">
            <p>新闻 新闻 新闻新闻新闻新闻</p>
            <p>新闻 新闻 新闻新闻新闻新闻</p>
            <p>新闻 新闻 新闻新闻新闻新闻</p>
            <p>新闻 新闻 新闻新闻新闻新闻</p>
            <p>新闻 新闻 新闻新闻新闻新闻</p>
            <p>新闻 新闻 新闻新闻新闻新闻</p>
            <p>新闻 新闻 新闻新闻新闻新闻</p>
        </div>
    </div>
    <script src="vue.js"></script>
    <script>
        var vue=new Vue({
            el:"#app",
            data:{
                htitile:['首页','娱乐','新闻'],
                showcontent: true,
                curState:0,        
                //显示状态
            },
            methods:{
                displayState(index){
                    //j接受index的值改变curState的值
                    console.log(index)
                    this.curState=index
                },
            }
        })
    </script>
</body>
</html>

彼岸的饭碗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
8.vue学习之小案例----选项卡的制作

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ mar
复制链接

扫一扫

专栏目录