vue-- 今日头条头部导航左右滑动效果

最新推荐文章于 2024-05-16 11:32:04 发布

wandoumm

最新推荐文章于 2024-05-16 11:32:04 发布

阅读量6.4k

点赞数 1

分类专栏： vue

vue 专栏收录该内容

106 篇文章 4 订阅

订阅专栏

<body>

    <div id="app">
        <nav>
            <p v-for="(item,$index) in arr" @click="toggle($index)" :class="{active:$index==active}">{{item}}</p>
        </nav>

    </div>
    <!-- Add your site or application content here -->




    <script>
        var app=new Vue({
            el:'#app',
            data:{
               active:0,
                arr:[
                    "新闻",
                    "视频",
                    "社会",
                    "军事",
                    "军事1",
                    "军事2",
                    "军事3",
                    "军事4",
                ]

            },
            computed:{

            },
            methods:{
                toggle(index){
                    this.active=index
                }
            },
        })



    </script>

css :

#app{
    width: 100%;
    overflow:hidden;

}
#app nav{
    padding: 0 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: middle;
    -ms-flex-align: middle;
    align-items: middle;
    overflow: auto;
}
#app p{
    text-align: center;
    font-size: 16px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding: 10px;
    margin: 5px;

}
#app p.active{
    color: #ffff00;
    background-color: #000000;
}

wandoumm

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue-- 今日头条头部导航左右滑动效果

&lt;body&gt; &lt;div id="app"&gt; &lt;nav&gt; &lt;p v-for="(item,$index) in arr" @click="toggle($index)" :class="{active:$index==active}"&gt;{{item}}&lt;/p
复制链接

扫一扫